我創建了一個使用綁定和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)}]`);
});
}
}
});
你試過$ element.attr( '我的指導性')? – Groben
哦,我一直試圖以$ attrs開始。謝謝! –