AngularJS指令-限制：'A‘并将该指令设置为等于一个值
AngularJS指令-限制：'A‘并将该指令设置为等于一个值
提问于 2017-04-19 15:24:17
我知道这可能是某种复制，但我真的不知道怎么说我要找的是什么。因此，我创建了一个仅限于属性的指令。我只是想知道如何才能让指令本身被设置为等于一个值。然后在链接函数中使用该值。
例如:假设我有一个名为“myDirective”的指令，该指令仅限于一个属性。我想知道怎样才能做这样的事
<input type="text" my-directive="vm.someValue" />并能够在指令的链接函数中访问该值。我知道我可以通过scope属性向指令附加一个新属性，但是这个解决方案对我来说要清晰得多，因为我只需要一个值。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-19 16:38:29
我创建了一个示例，说明如何在控制器内使用绑定和ngModel，并将函数链接到使用属性。
检查一下这个柱塞并尝试修改输入的值。
注意：$()用于监视插值属性。这意味着监视发生的变化，以防您有<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)}]`);
});
}
}
});Stack Overflow用户
发布于 2017-04-19 15:43:42
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上查询。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43499937
复制相关文章
相似问题
腾讯云开发者
