angularjs

Question

我已经尝试在我的应用程序中使用此代码段来使用 bs3 模态，并且效果很好。 http://jsfiddle.net/alexsuch/RLQhh/

但是，我想将模态代码和其他一些 html 标签包装到模板中以实现可重用性。

<div ng-controller="MainCtrl" class="container">
  <h1>Modal example</h1>
  <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
    <div ng-include src="'modal.html'"></div>
    <script type="text/ng-template" id="modal.html">
          <modal title="Login form" visible="showModal">
    <form role="form">
      <div class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </modal>
    </script>
</div>

这是我的 jsFiddle http://jsfiddle.net/wangjunji/gL7scbd9/

然后是 question.The 切换按钮仅在第一次使用。我知道 ng-include 指令会创建一个子作用域，这使得父作用域中的变量无法访问，但我不知道如何解决这个问题 problem.Can 有人帮忙吗？

谢谢。

Answer 1

我已经稍微更改了您的代码，因此布尔值将驻留在一个对象中，现在您只需要观察它即可：

控制器更改：

mymodal.controller('MainCtrl', function ($scope) {
    $scope.modalObj = { showModal : false };
    $scope.toggleModal = function(){
        $scope.modalObj.showModal = !$scope.modalObj.showModal;
    };
  });

指令（主要）变更：

scope.$watch(function () { return scope.modalObj.showModal; }, function(value){
    if(value == true)
      $(element).modal('show');
    else
      $(element).modal('hide');
});

当然，这些行现在将引用 scope.modalObj.showModal 而不是使用 parent/attr 关键字，通常您应该尽量避免使用这些关键字。

Fiddle

angularjs - ng-include 中的自定义指令不起作用

angularjs - custom directive in ng-include not working

angularjs-directive

angularjs-scope