問題NG-點擊和NG-顯示

我試圖做一個小的模態框架在我的應用程序..問題NG-點擊和NG-顯示

繼承人我的控制器：

function ModalCtrl($scope){ 
    $scope.openModal = function(name){ 
     $scope.modalStatus = true; 
    } 
    $scope.closeModal = function(name){ 
     $scope.modalStatus = false; 
    } 
    $scope.modal = function(){ 
     return $scope.modalStatus; 
    } 
    $scope.modalStatus = false; 
}

而且繼承人的HTML：

<div ng-controller="ModalCtrl"> 
    <div ng-show="modal()" class="modal_window"> 
    <h2>The title</h2> 
    <span>The content</span> 
    <a ng-click="closeModal()">Close</a> 
    </div> 
</div> 

<div ng-controller="ModalCtrl"> 
    <a ng-click="openModal('xyz')">Open it up</a> 
</div>

只是完全不工作..不能更糊塗

編輯：用的jsfiddle更新：http://jsfiddle.net/TeYfY/

來源

2013-01-21 Elliot

我還沒有詳細檢查過你的代碼，但是你的ngClick被定義爲以外的ngController，所以它無法訪問openModal函數。你會需要它的控制器內部的範圍，如訪問方法：

<div ng-controller="ModalCtrl"> 
    <div ng-show="modal()" class="modal_window"> 
    <h2>The title</h2> 
    <span>The content</span> 
    <a ng-click="closeModal()">Close</a> 
    </div> 

    <a ng-click="openModal('xyz')">Open it up</a> 
</div>

如果還有比這更多的問題，請隨時發佈Plunker或的jsfiddle和更新您的問題，我會很高興仔細觀察並修改我的答案。

PS：此代碼屬於指令。

更新

在評論中提到，他要控制從其他位置的模態的OP。這通常是完成與服務：

module.factory('ModalService', function() { 
    var is_visible = false; 

    return { 
    isVisible: function (value) { 
     if (angular.isDefined(value)) { 
     is_visible = value; 
     } else { 
     return is_visible; 
     } 
    } 
    }; 
});

在模態指令，一個可以監聽的服務狀態：

$scope.$watch(ModalService.isVisible, function (status) { 
    $scope.isVisible = status; 
});

而從遙遠的控制器，一個可以改變狀態上服務：

$scope.openModal = function() { 
    ModalService.setVisible(true); 
}

這是高度設計和過度簡化，但它應該說明這一點。除了服務之外，還可以使用事件來完成組件間通信，但在大多數情況下，服務更加乾淨。

來源

2013-01-21 06:53:37

鏈接實際上是在我的實際代碼中ng控制器（只是忘了在這個例子中）..更新jsfiddle雖然 – Elliot

@Elliot其實，我的答案仍然存在。當你多次使用ngController時，你會得到*兩個單獨的作用域*，所以你的變量不會在與模態相同的作用域中發生變化。結合他們就像我在我的答案，它工作得很好：http://plnkr.co/edit/yKX8RflMawhb9XxdtdgT?p=preview –

嗯，它們位於我的用戶界面的不同部分雖然..這就是爲什麼它應該是一個指示？ – Elliot

問題NG-點擊和NG-顯示

回答

相關問題