来自控制器的Angular指令访问模板元素

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 个解决方案

解决方案1
1 已采纳 2015-11-05 07:53:59

来自控制器的Angular指令访问模板元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-11-05 07:53:59

解决方案1
1 已采纳 2015-11-05 07:53:59