angularjs - 自定义指令NG-包括不工作(angularjs - custom dire

我试过这个片段在我的应用程序中使用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谁能帮助？

谢谢。

我已经改变了你的代码，那么一点点的布尔值将驻留对象内，而现在你只需要看着那不是：

控制器的变化：

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而不是使用父/ ATTR的关键词，一般你应该尽量避免这些。

小提琴