angularJS在directive的template中使用ng-template

最新推荐文章于 2022-09-15 21:21:48 发布

SB的二狗

最新推荐文章于 2022-09-15 21:21:48 发布

阅读量7k

点赞数

文章标签： directive ng-template

本文链接：https://blog.csdn.net/pkpk20044/article/details/52035424

版权

今天为大家介绍一下在angularjs的directive中使用ng-template的方法。

1.我们的问题是什么？

var page = angular.module('ausp.directive',['ui.tree']);

page.directive('auspTree', ['$templateCache',function($templateCache) {
   return{
       restrict: 'AE',  
       require: ['?^uiTree','?^uiTreeHandle','?^uiTreeNode','?^uiTreeNodes'],
       //templateUrl:'justiceportal/js/directive/treeTemplate.html',
       template : '<script type="text/ng-template" id="angularTreeTemplate"><ol ui-tree-nodes="" style="padding-left:10px;" ng-model="item.children" ng-class="{hidden: collapsed}"><li ng-repeat="item in item.children" ui-tree-node ng-include="angularTreeTemplate"></li></ol></script>',
       scope:false,
       replace:true,
       link: function ($scope,element,attributes) {
           $scope.dept=attributes.dept;
           $scope.readonly=attributes.readOnly;  
       }
    }
  }]);

上述代码的意思是在directive中把ng-template作为指令的template，这么做的意义是把常见的一些代码段封装到指令中，以便多次调用，但是遗憾的是，template不会编译ng-template而是把它当做普通的字符串

2.如何解决？

如上述代码注释掉的templateUrl所示，把template中的内容放入templateUrl所对应的文件是一种解决方式，但是templateUrl受路径的影响，不具有普遍性,所以这种方法扔不能彻底解决我们的问题。

于是我们换一种思路，完全抛弃template与templateUrl使用$templateCache配合directive优先级最高的compile函数，动态载入此模板

var page = angular.module('ausp.directive',['ui.tree']);

page.directive('auspTree', ['$templateCache',function($templateCache) {
   return{
       restrict: 'AE',  
       require: ['?^uiTree','?^uiTreeHandle','?^uiTreeNode','?^uiTreeNodes'],
       scope:false,
       replace:true,
       compile: function(element, attr) {
             var readonly=attr.readOnly;
             if(readonly==undefined||readonly==false){
                 $templateCache.put('treeTemplate', '<ol ui-tree-nodes="" style="padding-left:10px;" ng-model="item.children" ng-class="{hidden: collapsed}"><li ng-repeat="item in item.children" ui-tree-node ng-include="treeTemplate"></li></ol>');
             }else{
                 $templateCache.put('treeTemplate','<ol ui-tree-nodes="" style="padding-left:10px;" ng-model="item.children" ng-class="{hidden: collapsed}"><li ng-repeat="item in item.children" ui-tree-node ng-include="treeTemplate"></li></ol>');
             } 
           return {
               pre: function(scope, iElement, iAttrs, controller) { 
                   scope.treeTemplate='treeTemplate';
                   scope.dept=attr.dept;
               },
               post: function(scope, iElement, iAttrs, controller) {   
                   
               }
           }
       },
       link: function ($scope,element,attributes) {
           $scope.dept=attributes.dept;
           $scope.readonly=attributes.readOnly;  
       }
    }
  }]);

这样我们的问题就解决了