NG-點擊停止工作，首先單擊

我試圖創造一個模式彈出撥動這是非常相似的這個帖子之後：http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/NG-點擊停止工作，首先單擊

不過，我遇到了問題，因爲在我的代碼中，NG-點擊代碼只運行一次，然後在下次停止工作。我可以調出模態對話框，但除非刷新頁面，否則我無法複製它。

下面是代碼：

/scripts/controllers/.navjs

'use strict'; 

app.controller('NavCtrl', function ($scope) { 

    $scope.modalShown = false; 
    $scope.toggleModal = function() { 
    $scope.modalShown = !$scope.modalShown; 
    }; 

});

/views/nav.html

<div> 
... 
    <li><a ng-click="toggleModal()">Settings</a></li> 
... 
</div> 
<modal show='modalShown' width='750px' height='60%'> 
    <p>Modal Content Goes here<p> 
</modal>

/scripts/directives/modal.js

'use strict'; 

app.directive('modal', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     show: '=' 
    }, 
    replace: true, // Replace with the template below 
    transclude: true, // we want to insert custom content inside the directive 
    link: function(scope, element, attrs) { 
     scope.dialogStyle = {}; 
     if (attrs.width) { 
     scope.dialogStyle.width = attrs.width; 
     } 
     if (attrs.height) { 
     scope.dialogStyle.height = attrs.height; 
     } 
     scope.hideModal = function() { 
     scope.show = false; 
     }; 
    }, 
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>" 
    }; 
});

toggleModal func在第一次點擊之後，它似乎停止工作。有任何想法嗎？

UPDATE

這是我的index.html的樣子：

<!-- Add your site or application content here --> 
<div ng-controller='NavCtrl' ng-include="'views/nav.html'"></div> 
<div ng-view="container" id="main-container"></div>

當我移動NG-控制器= 'NavCtrl' 下面我NG-視圖，然後切換工作，但那麼導航欄發生在頁面的最底部...

來源

2014-06-08 kevin

你爲什麼叫'hideModal（）'和'不toggleModal（）'或以其他方式：不hideModal設置'$ scope.modalShown = FALSE ;也是？ – dsuess

你能創造一個小提琴嗎？ –

似乎在這裏工作：http://plnkr.co/edit/lx2PcXsrSRWMFw8miTtL?p=preview – Jerrad

似乎問題是角JS範圍隔離。當你使用ngInclude指令時，你已經創建了隔離範圍。而當你只使用一個布爾變量時，不可能將其從隔離範圍改變。必須使用對象。

只需使用

$scope.modalShown = { 
    value: false 
}

在HTML

... show='modalShown.value' ...

來源

2014-11-22 07:30:28 BotanMan

NG-點擊停止工作，首先單擊

回答

相關問題