Question

我有一个列表，当您点击某个项目时，它会抛出一个包含该特定项目详细信息的popover。我已经设置了一个指令来动态编译一个新的popover指令并在关闭时删除/销毁它。

这是一个有效的example。

//JS    
angular.module('compileExample', [])
      .controller('CompileController', ['$scope', function($scope) {

          $scope.things = [{name:'One'},{name:'Two'},{name:'Three'}];

      }])
    .directive('primaryDir', ['$compile', function($compile) {
        return {
            scope: {},
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.on('click', function() {
                    /* NOTE: The string template in template would get large and is nasty. */
                    var data = JSON.parse(attrs.primaryDirData),
                        template = $compile('<div class="panel panel-cover js-bind">Data from '+data.name+'<button ng-click="remove()">Remove</button></div>')(scope);
                    angular.element('.container').append(template);

                    scope.remove = function() {
                        angular.element('.js-bind').remove();
                    };
                });
            }
        };
    }]);

// HTML
<div ng-app="compileExample">
  <h2 class="inject">Todo</h2>
  <div ng-controller="CompileController" class="container">
      <div class="well" ng-repeat="thing in things" primary-dir primary-dir-data="{{thing}}">
          {{thing.name}}
      </div>
  </div>
</div>

问题

我的指令链接函数中的字符串模板很讨厌，它会变得更大。所以我决定将模板渲染分解为它自己的指令，这样我就可以使用指令的API进行模板加载。工作example here。但现在它没有通过正确的数据，我得到旧的null / [object Object]。如果有人有动态建立数据驱动指令的任何建议，我很想确定一些最佳实践。我没有和$ compile结婚，它似乎是最高性能的选择。

// JS    
angular.module('compileExample', [])
      .controller('CompileController', ['$scope', function($scope) {

          $scope.things = [{name:'One'},{name:'Two'},{name:'Three'}];

      }])
    .directive('template', function() {
        return {
            replace: true,
            template: '<div class="panel panel-cover js-bind">Data from  <strong>{{foo}}</strong> <button ng-click="remove()">Remove</button></div>',
            link: function(scope, element, attrs) {
                scope.foo = !attrs.data ? 'bar' : attrs.data;
          }
        };
    })
    .directive('primaryDir', ['$compile', function($compile) {
        return {
            scope: {},
            link: function(scope, element, attrs) {
                var data = JSON.parse(attrs.primaryDirData);
                element.on('click', function() {
                    var template = $compile('<div template data="'+data+'"></div>')(scope);
                    scope.$apply(function (){
                        angular.element('.container').append(template);
                    });
                });

                scope.remove = function() {
                        angular.element('.js-bind').remove();
                    };
            }
        };
    }]);

Answer 1

有叉子和叉子稍微改写了你的小提琴，现在看起来像http://jsfiddle.net/749yq8ez/8/

使用JSON.parse＆amp;你可能会看到这种情况下的separete模板指令很奇怪。

大型模板案例的正确定义 - 将其移至script标记或单独文件并使用$templateCache服务

使用$ compile时传入数据

1 个答案: