Question

基本设置：

我有一个模态表单，里面有一个自定义指令（子元素）。自定义指令是一个按钮。模态也包含一个输入复选框。

最终目标：

每当选中“选中”复选框时，都应启用自定义指令/按钮元素。如果复选框为“未选中”，则应禁用自定义指令/按钮。

到目前为止我的想法是什么？

在'modalController'中，我在复选框输入上放置了一个ng-model来动态改变变量的值（isChecked）。检查输入时，它将$ scope.isChecked值设置为true，当取消选中时，$ scope.isChecked为false。

为了禁用按钮，我会将'isChecked'的值从modalController传递给custom指令，其中的值可以放在指令模板内按钮的ng-checked表达式中（参见下文）。

问题

当我尝试此解决方案时，控制台日志显示错误，指出“未定义inputCheck”。一旦页面加载就会发生这种情况，因此在用户甚至可以单击复选框之前，控制台日志会被打印出来。关于如何使这项工作的任何想法？

模态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);
         }]
     };
});

按钮-directive.html：

<button ng-checked="inputCheck">

Answer 1

你做错了。 $ scope变量与该指令范围声明不同。

每个孩子，包括指令，都在范围范围内，得到它吗？

因此，您的指令声明不需要该范围，请将其删除。

angular.module('starter').directive('buttonDirective', function ($uibModal) {
    return {
        restrict: "EA",
        templateUrl: "app/directives/button-directive.html"
     };
});

你的模态，不需要传递你的inputCheck属性。

 <div ng-controller= "modalController">
    <input type="checkbox" ng-model="isChecked">
    <button-directive></button-directive>
  </div>

然后您的指令html变为

<button ng-checked="isChecked">

见这个

https://plnkr.co/edit/icaufi3LJxTnbTOkmxdb

Answer 2

按照你的方式工作。

你传递属性错误，angularjs有一个坏东西IMO就是当你将值传递给像inputCheck这样的指令时，你必须把它写成与hiphen不同的所以它需要input-check

<button-directive input-check="isChecked"></button-directive>

您的范围声明必须使用等号

scope: {
  inputCheck: "="    
},

https://plnkr.co/edit/5jlHaE0fvhoDPi2h8XGq?p=preview

Answer 3

您应该进行以下更改：

<button-directive input-check="isChecked"></button-directive>

scope: {
  inputCheck: "="    
}

<button ng-disabled="inputCheck">

如何将控制器的scope属性传递给自定义指令？

3 个答案: