不能将布尔值传递给带有 Angular 的指令

Cannot pass boolean to directive with Angular

本文关键字：Angular 指令 布尔 值传 不能      更新时间：2023-09-26

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

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>

由于您已将指令控制器附加到directiveCtrl而不是mainCtrl，您将使用 directiveCtrl.someBoolean 访问变量someBoolean。

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

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

普朗克。

另一种解决方案是删除指令中的 bindToController 属性。这样，您无需在变量之前使用控制器名称。工作普伦克。

在此处阅读有关此bindToController功能的更多信息。

相关文章：