指令範圍並不控制器

我的指令的控制器是沒有得到與已使用「=」雙向綁定設置範圍的更新得到更新。指令範圍並不控制器

這裏是我的指令：

.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

指令範圍並不控制器

回答

相關問題