Question

我正在尝试创建一个与此帖非常相似的模态弹出式切换：http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/

但是，我遇到了问题，因为在我的代码中，ng-click代码只运行一次，然后下次停止工作。我可以打开模态对话框，但除非我刷新页面，否则我无法复制它。

以下是代码：

/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函数似乎停止工作。有什么想法吗？

更新

这是我的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-view下面移动ng-controller ='NavCtrl'时，切换工作，但导航栏出现在页面的最底部......

Answer 1

似乎问题是角度JS范围隔离。使用ngInclude指令时，您已创建了隔离范围。而且，由于您只使用bool变量，因此无法从隔离范围更改它。必须使用对象。

只需使用

 $scope.modalShown = {
    value: false
 }

in html

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

首次单击后，ng-click停止工作

1 个答案: