2017-04-19 91 views
1

我知道這可能是某種重複,但我真的不知道如何說出我要找的內容。所以我創建了一個限制爲屬性的指令。我幾乎想知道如何讓指令本身被設置爲等於一個值。然後在鏈接函數中使用該值。AngularJS指令 - 限制:'A'並將該指令設置爲一個值

例如:假設我有一個名爲'myDirective'的指令,該指令僅限於一個屬性。我想知道我該如何去做這樣的事情

<input type="text" my-directive="vm.someValue" /> 

並且能夠在指令的鏈接函數中訪問該值。我知道我可以通過scope屬性爲指令附加一個新屬性,但是這個解決方案對我來說似乎更清潔,因爲我只需要一個值。

+1

你試過$ element.attr( '我的指導性')? – Groben

+0

哦,我一直試圖以$ attrs開始。謝謝! –

回答

0

我創建了一個使用綁定和ngModel內控制器和鏈接函數一起使用屬性的示例。

Check this Plunker並嘗試修改輸入的值。

注意: attrs。$ observe()用於監視插值屬性。這意味着如果您有<div my-directive="{{someVal}}"></div>,請注意更改。因此,在附加示例中,回調將不會被觸發,因爲DOM屬性值不會因插值而發生更改。

注:還綁定提供不同的行爲像@(獲取字符串值),=(雙向數據綁定),<(單向數據綁定)。

注意:在某些情況下,您想要注入NgModelController以便在ngModel上工作(例如:更改標誌,更改值,與驗證交互)。

基於所有這些用法,您可以選擇您喜歡的做事方式。

如果您需要操作DOM,您可以使用鏈接功能。但在這種情況下,您需要操作數據,然後可能適合使用控制器。

HTML

<body> 
    <div my-directive="myVal" ng-model="myVal"></div> 
    <input type="number" ng-model="myVal" /> 
    </body> 

JS

var app = angular.module('plunker', []); 

app.directive('myDirective', function() { 
    return { 
    restict: 'A', 
    scope: { 
     // one-way binding 
     prop1: '<myDirective', 
     // two-way binding 
     prop2: '=myDirective', 
     // string value 
     prop3: '@myDirective', 
     // bind to ngModel value 
     ngModelProp: '<ngModel' 
    }, 
    require: '^ngModel', 
    controller: function($scope) { 

     $scope.$watch(() => $scope.prop1,() => { 
     console.log(`controller - scope - <myDirective - ${$scope.prop1} [${typeof($scope.prop1)}]`); 
     }); 

     $scope.$watch(() => $scope.prop2,() => { 
     console.log(`controller - scope - =myDirective - ${$scope.prop2} [${typeof($scope.prop2)}]`); 
     }); 

     $scope.$watch(() => $scope.prop3,() => { 
     console.log(`controller - scope - @myDirective - ${$scope.prop3} [${typeof($scope.prop3)}]`); 
     }); 

     $scope.$watch(() => $scope.ngModelProp,() => { 
     console.log(`controller - scope - ngModel - ${$scope.ngModelProp} [${typeof($scope.ngModelProp)}]`); 
     }); 
    }, 
    controllerAs: 'ctrl', 
    link: function($scope, element, attrs, ngModel) { 

     $scope.$watch(() => $scope.prop1,() => { 
     console.log(`link - scope - <myDirective - ${$scope.prop1} [${typeof($scope.prop1)}]`); 
     }); 

     $scope.$watch(() => $scope.prop2,() => { 
     console.log(`link - scope - =myDirective - ${$scope.prop2} [${typeof($scope.prop2)}]`); 
     }); 

     $scope.$watch(() => $scope.prop3,() => { 
     console.log(`link - scope - @myDirective - ${$scope.prop3} [${typeof($scope.prop3)}]`); 
     }); 

     $scope.$watch(() => $scope.ngModelProp,() => { 
     console.log(`link - scope - ngModel - ${$scope.ngModelProp} [${typeof($scope.ngModelProp)}]`); 
     console.log(`link - NgModelController - ${ngModel.$modelValue} [${typeof(ngModel.$modelValue)}]`); 
     }); 

     $scope.$watch(() => element.attr('my-directive'),() => { 
     console.log(`link - element - ${element.attr('my-directive')} [${typeof(element.attr('my-directive'))}]`); 
     }); 

     attrs.$observe('myDirective',() => { 
     console.log(`link - attrs - ${attrs.myDirective} [${typeof(attrs.myDirective)}]`); 
     }); 
    } 
    } 
}); 
+0

感謝您的澄清!這是一個非常深入的例子,它向我展示了很多我以前從未見過的東西。 「()=>」是什麼意思在手錶裏面? –

+0

它們被稱爲「箭頭函數」(來自ES6)。你可以閱讀更多關於他們[這裏](https://developer.mozilla。例如,org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。是不是一個小的主題被添加到評論:)。你可以在其他語言中找到類似的東西,但稱爲「lambda表達式」。你會發現在這段代碼中沒有必要使用箭頭函數,而普通函數就是完美的。爲了語義的緣故,還有時候使用函數和案例的時候使用箭頭函數。 – andreim

0

您可以通過l ink functionattrs參數訪問屬性。

function linkingFn(scope, elm, attrs, ctrl) { 
    // get the attribute value 
    console.log(attrs.ngModel); 

    // change the attribute 
    attrs.$set('ngModel', 'new value'); 

    // observe changes to interpolated attribute 
    attrs.$observe('ngModel', function(value) { 
    console.log('ngModel has changed value to ' + value); 
    }); 
} 

對你而言,你可以詢問myDirective

+0

我看到了,感謝其他設置和觀察值的例子! $觀察的例子可能只是救了我一堆額外的麻煩:) –