Question

我的指令控制器没有使用＆＃39; =＆＃39;设置的范围进行更新。双向绑定。

这是我的指示：

.directive('navigation', function() {
    return {
      restrict: 'E',
      scope: {
        selection: '=?selectedItem',
        goforward: '&onForward'
      },
      controller: function() {
        var vm = this;
        vm.hideForward = !vm.selection
      },
      controllerAs: 'vm',
      bindToController: true,
      template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>'
    };
  });

这是我使用该指令的html文件：

<div class='product' ng-click='ctrl.selectedItem = true'>item</div>
<navigation on-forward="ctrl.goForward()" selected-item='ctrl.selectedItem'></navigation>

注意：ctrl.goForward（）工作正常。

单击产品div后，html控制器中的vm.selectedItem仅设置为true。

我希望ctrl.selectedItem能够传递到我的指令控制器并修改vm.hideForward值，除非没有发生这种情况。

我希望能够改变导航指令是否可见和/或活动，具体取决于从我使用我的指令的任何控制器范围传递给它的变量。

如果我在我的指令模板中放置了<div>{{vm.selectedItem}}</div>，那么会根据值ctrl.selectedItem的变化情况正确打印出来。我的问题是让指令的控制器也改变。

我如何不正确地设置此范围绑定？我使用的是角1.5.3

Answer 1

您不需要使用双括号将函数绑定到ng-click，请使用ng-click="vm.goforward()"

将函数作为on-forward="ctrl.goForward"传递给指令，如果使用括号，则将传递函数调用的结果。

同样，ng-click='ctrl.selectedItem === true'您应该使用ng-click='ctrl.selectedItem = true'来设置值，因为===是比较运算符。

Answer 2

ctrl.selectedItem似乎是来自当前控制器的变量。因此，在将其作为属性传递时，您需要将其作为“{{ctrl.selectedItem}}”传递。

尝试使用：

**<navigation on-forward="ctrl.goForward()" selected-item='{{ctrl.selectedItem}}'></navigation>**

Answer 3

试试这个

.directive('navigation', function() {
    return {
      restrict: 'E',
      scope: {
        selection: '=selectedItem',
        goforward: '&onForward'
      },
      controller: function(scope) {
        var vm = this;
        vm.hideForward = !scope.selection
      },
      controllerAs: 'vm',
      bindToController: true,
      template: '<button ng-hide="vm.hideForward" ng-click="vm.goforward()">Continue</button>'
    };
  });

指令范围未在控制器中更新

3 个答案: