Question

我正在使用angular指令为各种元素添加可重用的弹出窗口。由于样式限制，我不需要将弹性元素添加到元素中，而是需要将它添加到文档正文中。我后来想在我的控制器中访问它 - 我该怎么做呢？

.controller 'slUserCtrl', ($element) ->
   $element.popup
      hoverable: true
      position: 'bottom right'
      popup: # What do I put here to get the "template" DOM element?

.directive 'slUser', ($document) ->
   template = $templateCache.get 'users/sl-user.html'

   return {
      restrict: "A"
      controller: 'slUserCtrl'
      compile: (elem, attrs) ->
         angular.element(document.body).append template
   }

Answer 1

如果要通过将模式弹出窗口附加到文档正文来显示模式弹出窗口，则表示您正在操作DOM。 DOM操作有一个好的地方，那就是指令的链接功能。

var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
});

app.directive('modal', function() {
  return {
    restrict: 'A',
    transclude: 'element',    
    controller: function($rootScope) {
      $rootScope.dialog = { show: false };
    },
    link: function(scope, element,attr,ctrl, transclude) {      
      transclude(function(clone, scope) {
        scope.$watch('dialog.show', function (val) {
          if (val) {
            clone.css('display', 'block');  
          }
          else {


            clone.css('display', 'none');                
          }
        });
        angular.element(document.body).append(clone);
      });
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  
  <div ng-controller="ctrl">
    Hello World!
    <button ng-click="dialog.show = !dialog.show">Open Modal </button> {{test}}
    <div modal>
         This is a modal dialog
    </div>
  </div>
  
</body>

Angular指令从控制器访问模板元素

1 个答案: