指令范围并不控制器

我的指令的控制器是没有得到与已使用“=”双向绑定设置范围的更新得到更新。指令范围并不控制器

这里是我的指令：

.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（）的作品就好了。

的vm.selectedItem在HTML的控制器一旦产品的div被点击时，才设置为true。

我预计ctrl.selectedItem被传入我的指令的控制器并修改vm.hideForward的值，除非没有发生。

我希望能够改变导航指令是否可见和/或活性取决于传递到它无论从任何控制器的范围我用我的指示变量。

如果我把一个<div>{{vm.selectedItem}}</div>在我的指令的模板，它根据ctrl.selectedItem值的变化如何正确输出。我的问题是让指令的控制器也改变。

我如何设立这个范围不适当地结合？我使用的角度1.5.3

来源

2016-04-25 stecd

通常它不是有意义的，但我已经遇到过几次。使用NG隐藏有时不能按预期工作。具有u试图用NG-如果不是在你的指令的模板 –

ctrl.selectedItem从本控制器的变量。因此，尽管它传递作为属性，您需要将它作为'{{ctrl.selectedItem}}“ –

你不需要双括号内为绑定功能，NG-点击，使用ng-click="vm.goforward()"

传递函数的指令，因为on-forward="ctrl.goForward"，如果你使用括号，你会被传递而是调用函数的结果。

亦是为ng-click='ctrl.selectedItem === true'你应该使用ng-click='ctrl.selectedItem = true'设定值，如===是一个比较操作。

来源

2016-04-25 22:16:57 MTietze

我修复了{{}}问题和===问题。但我相信我应该传递函数调用，而不仅仅是函数本身。我不确定为什么，因为正如你所建议的那样，传递函数确实更有意义，但这就是在[angular的文档]（https://docs.angularjs.org/guide/directive）和[ egghead教程]（https://egghead.io/lessons/angularjs-isolate-scope-expression-binding） – stecd

如果你通过这个功能你必须在你的指令中调用它。如果你想按照ng单击完成，你必须在每次需要时评估表达式 – Walfrat

看起来你是正确的传递这样的函数，我的错误。 – MTietze

ctrl.selectedItem似乎是从本控制器的变量。所以，当把它当作属性，你需要把它作为“{{ctrl.selectedItem}}”

尝试使用：

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

来源

2016-04-26 06:40:11

试试这个

.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>' 
    }; 
    });

来源

2016-04-26 06:46:04

指令范围并不控制器

回答

相关问题