我知道这可能是某种重复的，但我真的不知道如何言语。因此，我创建了一个仅限于属性的指令。我几乎只是想知道如何允许指令本身等于值。然后在链接函数中使用该值。
例如：假设我有一个名为" myDirexce"的指令，该指令仅限于属性。我想知道如何做这样的事情
<input type="text" my-directive="vm.someValue" />
，并且能够在指令的链接函数中访问该值。我知道我只能通过范围属性将新属性附加到指令，但是这个解决方案对我来说似乎更为干净，因为我只需要一个值。
我创建了一个使用绑定和ngmodel的示例，并在控制器内部和链接函数一起使用属性。
检查此plunker并尝试修改输入的值。
注意：attrs。$ observe((用于观察插值属性。这意味着要查看更改，以防您有<div my-directive="{{someVal}}"></div>。因此，在随附的样本中不会触发回调，因为DOM属性值由于插值而不会发生变化。
注意：绑定也提供了不同的行为，例如@(GET String value(，=(双向数据绑定(，<(单向数据绑定(。
注意：在某些情况下，您要注入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)}]`);
});
}
}
});
您可以通过链接函数的attrs参数访问属性。
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上询问。