angularjs在一个元素上有两个指令
angularjs two directives on one element
我有两个指令:
// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
return {
scope: {
focus: "=focusMe"
},
link: function(scope, element) {
return scope.$watch("focus", function(value) {
if (value === true) {
element[0].focus();
return scope.focus = false;
}
});
}
};
});
和:
// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
return {
scope: {
clean: "=cleanMe"
},
link: function(scope, element) {
return scope.$watch("clean", function(value) {
if (value === true) {
element[0].value = "";
return scope.clean = false;
}
});
}
};
});
该输入(angularUI):
<input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">
我得到这个错误:
Error: [$compile:multidir] http://errors.angularjs.org/1.2.3/$compile/multidir?p0=cleanMe&p1=focusMe&p…2%20focus-me%3D%22usersFocusInput%22%20clean-me%3D%22usersCleanInput%22%3E
我做错了什么?
如果我从html中删除clean-me属性,它就会起作用。
感谢
这里并不真正需要隔离的作用域。使用"正常"指令范围,该指令将从父指令继承,如下所示:
// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
return {
link: function(scope, element, attrs) {
return scope.$watch(attrs.focusMe, function(focusMe) {
if (focusMe.value === true) {
element[0].focus();
return scope[attrs.focusMe].value = false;
}
});
}
};
});
// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
return {
link: function(scope, element, attrs) {
return scope.$watch(attrs.cleanMe, function(cleanMe) {
if (cleanMe.value === true) {
element[0].value = "";
return scope[attrs.cleanMe].value = false;
}
});
}
};
});
如果您已经知道继承是如何工作的,请忽略这一部分,只是为了完整性而添加:
请注意,我使用的是[attrs.focusMe].值,而不仅仅是[attrs.focusMe]。原因是继承在javascript中的工作方式。这些指令是子作用域,因此如果您尝试执行scope[attrs.focusMe]=false,您将在指令的作用域中设置一个局部变量,即不会影响父作用域(使用它的控制器)。但是,如果您使focusMe模型(无论它是什么)成为父作用域中的对象,然后更改该对象的值,则它将而不是设置局部变量,而是更新父对象。因此:
scope[attrs.focusMe] = false; // Sets a local variable, does not affect the parent
scope[attrs.focusMe].value = false; // Updates focusMe on the parent
如果你想要一个深入的指南,这里有一个关于继承的好答案:AngularJS中范围原型/原型继承的细微差别是什么?
您有两个指令,它们要求在同一元素上具有独立的作用域,这是不允许的。
不允许这样做的原因是,如果指令中有一些模板{{...}}
代码,那么就不清楚它应该从哪个范围获取值。
考虑使用attribute.$observe
监视cleanMe
和focusMe
属性并对它们执行操作,而不是隔离作用域。
app.directive("focusMe", function() {
return {
link: function(scope, element, attributes) {
attributes.$observe("focusMe", function(value) {
if (value === true) {
element[0].focus();
scope.focus = false;
}
});
}
};
});
和:
app.directive("cleanMe", function() {
return {
link: function(scope, element, attributes) {
attributes.$observe("cleanMe", function(value) {
if (value === true) {
element[0].value = "";
return scope.clean = false;
}
});
}
};
});
我终于找到了解决方案:)
// Generated by CoffeeScript 1.6.3
app.directive("focusMe", function() {
return {
link: function(scope, element, attributes) {
return scope.$watch(attributes.focusMe, function(value) {
if (scope[value] === true) {
element[0].focus();
return scope[attributes.focusMe] = false;
}
});
}
};
});
// Generated by CoffeeScript 1.6.3
app.directive("cleanMe", function() {
return {
link: function(scope, element, attributes) {
return scope.$watch(attributes.cleanMe, function(value) {
if (value === true) {
element[0].value = "";
return scope[attributes.cleanMe] = false;
}
});
}
};
});
在html中,usersFocusInput和usersCleanInput是作用域中的参数,因此我使用scope[attributes.focusMe]来获取此参数并将其更改为false。
<input type="text" ng-model="addUserSelected" typeahead="emp.value for emp in allUsers | filter:$viewValue | limitTo:5" typeahead-editable="false" typeahead-on-select="addLine($item.id)" focus-me="usersFocusInput" clean-me="usersCleanInput">
相关文章:
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- 比较 AngularJS 指令中的两个整数
- angularjs在一个元素上有两个指令
- 角度调用父函数,其参数来自两个级别深的指令
- 两个指令引用一个变量,但第二个指令不引用;不要急于改变
- 比较 angularjs 指令中的两个字段
- 两个不同的角度指令会出现相同的模板
- 使用指令在 1000 条记录上的两个表之间进行角度拖放
- 具有两个模板容器的指令
- 在 Angular 中,在两个不同的指令之间传达匹配的$index
- 具有相同选项的角度两个(restrict:'A')指令
- 用两个指令解除禁令
- 一个指令的两个实例正在使用同一个模板实例
- angular.js两个指令,第二个指令不执行
- Angularjs:在两个指令之间失去作用域
- 如何将两个指令结合使用-angular translate&角截形
- 将两个指令组合在一起
- AngularJS-将两个指令绑定/链接在一起
- AngularJS-1指令,带有ng-if语句或两个指令