基本设置:
我有一个模态表单,里面有一个自定义指令(子元素)。自定义指令是一个按钮。模态也包括一个输入复选框。
最终目标:
每当复选框被选中时,自定义指令/按钮元素应该被启用。如果复选框被取消选中,自定义指令/按钮应该被禁用。
到目前为止,我的想法是:
在'modalController'中,我在复选框输入上放置了一个ng-model,以动态更改变量(ismap)的值。当输入被选中时,它将$scope. ismap值设置为true,当它未被选中时,$scope. ismap值为false。
为了禁用按钮,我会将modalController中的“iskey”值传递给自定义指令,在自定义指令中,它的值可以放在指令模板中按钮上的ng-checked表达式中(见下文)。
- 问题 *
当我尝试这个解决方案时,控制台日志显示一个错误,说“inputCheck is not defined”。这在页面加载时就会发生,所以在用户甚至可以单击复选框之前,控制台日志就被打印出来了。关于如何实现这一点,有什么想法吗?
Modal html:
<div ng-controller= "modalController">
<input type="checkbox" ng-model="isChecked">
<button-directive inputCheck="isChecked"></button-directive>
</div>
字符串
ButtonDirective.js:
angular.module('starter').directive('buttonDirective', function ($uibModal) {
return {
restrict: "EA",
templateUrl: "app/directives/button-directive.html",
scope: {
inputCheck: "@"
},
controller: ['$scope', function ($scope) {
console.log(inputCheck);
}]
};
});
型
button-directive.html:
<button ng-checked="inputCheck">
型
4条答案
按热度按时间wyyhbhjk1#
你做错了。$scope变量与指令的范围声明不同。
每个子元素,包括指令,都在$scope作用域中,明白了吗?
所以你的指令声明不需要这个作用域,删除它。
字符串
和你的模态,不需要传递你的inputCheck属性。
型
那么你的指令html就变成了
型
看到这个
https://plnkr.co/edit/icaufi3LJxTnbTOkmxdb
j1dl9f462#
像你那样工作。
你传递的属性错误,angularjs有一个不好的事情IMO,那就是当你传递值给像inputCheck这样的指令时,你必须用hiphen写不同的值,所以它需要是
input-check
字符串
并且作用域声明必须使用等号
型
https://plnkr.co/edit/5jlHaE0fvhoDPi2h8XGq?p=preview
dwthyt8l3#
您应该做以下更改:
字符串
1u4esq0p4#
当您用途:
字符串