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

Question

基本设置：

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

最终目标：

只要复选框被“选中”，就应该启用自定义指令/按钮元素。如果复选框未选中，则应禁用自定义指令/按钮。

到目前为止我所拥有的也就是我的思考过程：

在“modalController”中，我在复选框输入上放置了一个 ng-model，以动态更改变量的值 (isChecked)。当输入被选中时，它会将 $scope.isChecked 值设置为 true，当它未选中时，$scope.isChecked 为 false。

为了禁用按钮，我会将 modalController 中的“isChecked”值传递给自定义指令，在该指令中，它的值可以放在指令模板内按钮上的 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);
         }]
     };
});

button-directive.html:

<button ng-checked="inputCheck">

Answer 1

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

每个孩子，包括指令，都在 $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">