无法将布尔值传递给带有 Angular 的指令

Question

我正在尝试将一个布尔值从我的控制器传递到我的隔离范围指令中。当我从指令的 link 函数 console.log(attrs) 时，someBoolean 属性是一个字符串，呈现实际文本 "main.bool" 而不是 true 或 false 值。当我从外部控制器切换布尔值时，我希望它在指令中更新。

https://plnkr.co/edit/80cvLKhFvljnFL6g7fg9?p=preview

app.directive('myDirective', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        someBoolean: '='
      },
      templateUrl: 'myDirective.html',
      link: function(scope, element, attrs) {
        console.log(scope);
        console.log(attrs);
      },
      controller: function($scope, $element, $attrs) {
        console.log(this);
      },
      controllerAs: 'directiveCtrl',
      bindToController: true
    };
  });

控制器

   app.controller('MainCtrl', function($scope) {
      var vm = this;

      vm.bool = true;
      vm.change = function() {
        vm.bool = !vm.bool;
      }
    });

模板

<div>
  Inside directive: {{someBoolean}}
</div>

Answer 1

由于您已将指令控制器附加到 directiveCtrl 而不是 mainCtrl，因此您将使用 directiveCtrl.someBoolean.

访问变量 someBoolean

在这种情况下，将 HTML 更改为：

<div>
  Inside directive: {{directiveCtrl.someBoolean}}
</div>

Plunker.

另一种解决方案是删除指令中的 bindToController 属性。有了这个，您不需要在变量前使用控制器名称。工作 Plunker.

详细了解此 bindToController 功能 here。

无法将布尔值传递给带有 Angular 的指令

Cannot pass boolean to directive with Angular

javascript

angularjs

angularjs-directive

angular-directive