angularjs – ng-click在使用嵌套指令时首次使用$compile后停止工作

前端之家收集整理的这篇文章主要介绍了angularjs – ng-click在使用嵌套指令时首次使用$compile后停止工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用辅助/包装指令的Angular模态指令.这样我总是可以使用相同的包装器,只需在不同的模态内容所需的位置加载不同的模板.

问题:此代码段有效,但仅适用于模态的第一个生命周期.所以我可以发射模态,关闭模态并再次发射它.但是一旦模态打开,第二次ng-click指令都不起作用.任何提示都只是超级.

用法

<button my-modal="views/login.html">Launch Login-specific Modal</button>

指令模块(app.js)

angular.module('myModal',[])

.directive('modalWrapper',function(){
  return {
    replace: true,templateUrl: 'views/modal.html',controller: function($scope,$element){
      $scope.close = function(){
        $element.remove();
      };
      // NOTE: I use this array to showcase that ng-repeat still works the second time although ng-click stops functioning properly.
      $scope.others = ["One","Two","Three"];
    }
  }
})

.directive('myModal',function( $compile){

      function link(scope,element,attr){

      scope.partial = attr.myModal; // NOTE: Loads sub template via ng-include

      var ngModal = $compile('<div modal-wrapper></div>')(scope);

      element.on('click',function(){
        angular.element('body').append(ngModal);
      });

      scope.yo = function(){
        alert("Yo from inside template.");
      };

    }

    return {
      link: link,scope: {}
    }
});

模板

modal.html

<div class="my-modal">
    <p>Modal Wrapper</p>
    <div ng-include="partial"></div>
  <button ng-click="close()">Close</button>
  <p>This just proves that other directives still work (ng-repeat),but ng-click does not.</p>
  <div ng-repeat="stuff in others">
    <p>{{stuff}}</p>
  </div>
</div>

的login.html

<h1>Well hey there,I'm the login template.</h1>
<button ng-click="yo()">Say Yo</button>
我认为问题是你正在破坏编译ng-click的范围.

调用scope.close()时,会发生$element.remove().这两者都从DOM中删除元素,并破坏它所附加的范围.这将导致您的ng-click被取消注册.

不幸的是(截至上次我检查过),element.detach()也会破坏范围,所以最好的办法是将元素编译并附加到body只有一次.在此之后,您可以使用element.show()和element.hide()来显示和隐藏模态.或者,您可以在每次要显示模式时重新编译模态.

猜你在找的Angularjs相关文章