來自控制器的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