我試圖在窗體上添加一個簡單的「切換」。如果我點擊一個按鈕,那麼我應該激活一個相應命名的部分,否則應該隱藏視圖。我的問題似乎是範圍之一。如果我沒有在子步驟中使用隔離範圍,那麼這兩個子步驟在一個切換點上將顯示爲激活狀態,而在另一個子切換點上處於非激活狀態(這是不正確的行爲)。如果我做使用一個孤立的範圍,然後isActive()
永遠不會被調用。ng-show沒有按預期方式綁定
我的代碼如下。
<div ng-controller='SubstepCtrl'>
<button activates='CreateNewMeter'>
Create new Meter
</button>
<button activates='UseExistingMeter'>
Use Existing Meter
</button>
<div class='sub-step' substep='CreateNewMeter' ng-show='isActive(name)'>
<h1>Create New Meter</h1>
</div>
<div class='sub-step' substep='UseExistingMeter' ng-show='isActive(name)'>
<h1>Use Existing Meter</h1>
</div>
</div>
角:
.controller('SubstepCtrl', function($scope) {
$scope.activeSubstepName = undefined;
$scope.isActive = function(name) {
return $scope.activeSubstepName == name;
};
})
.directive('activates', function() {
return {
link: function($scope, $element, $attrs) {
$element.on('click', function() {
$scope.activeSubstepName = $attrs.activates;
$scope.$apply();
});
}
};
})
.directive('substep', function() {
return {
link: function($scope, $element, $attrs) {
$scope.name = $attrs.substep;
}
};
});
我設法在使用jQuery相當哈克的方式來實現這一點,但我不知道是否有一種方式來角IFY它。
預期的行爲是,如果我點擊「創建新儀表」按鈕,應該顯示「CreateNewMeter」子步驟,並且「UseExistingMeter」不應該顯示。據我瞭解這裏的問題是子步驟div不創建一個子範圍,都使用父範圍 - 因此名稱是未定義的 - 對嗎?
如果是這樣,我該如何補救?
對不起,是的,我跳過了這一點。但是它在實際代碼中是$ scope.activeSubstepName。 – 2014-09-29 13:23:14
您的子步驟指令將控制器中的$ scope.name設置爲頁面上最後一個子步驟元素的名稱,這就是爲什麼您看到它們都顯示出來(它們都使用相同的「標誌」) – JoseM 2014-09-29 13:26:25
您需要傳遞名稱妥善.. http://plnkr.co/edit/2KowNF?p =預覽You'r子步驟只使用控制器範圍,因此範圍中的name屬性將被指令的最後一個實例覆蓋。 – PSL 2014-09-29 13:27:43