angular.module('treeDemo', ['RecursionHelper']) .controller("TreeController", function($scope) { $scope.folder = { name: 'techs', children: [ { name: 'server-side', children: [ { name: 'Java' }, { name: 'Python' }, { name: 'Node' } ] }, { name: 'front-end', children: [ { name: 'jQuery' }, { name: 'Angular' }, { name: 'React' } ] } ] } }) .directive("folderTree", function(RecursionHelper) { return { restrict: "E", scope: { currentFolder: '=' }, templateUrl: 'template/tree.html', compile: function(element) { // 我们这里使用RecursionHelper的compile方法编译指令当前元素，这里第二个参数指定一个函数，相当于常用的link函数 // 当然我们也可以指定一个对象，里面包含pre和post函数，分别对应pre-link和post-link return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn){ // Define your normal link function here. // Alternative: instead of passing a function, // you can also pass an object with // a 'pre'- and 'post'-link function. // 这里可以往scope中绑定一些变量 scope.variable = 'hello world'; }); } }; });
在上面代码中，我们在创建treeDemo模块时引入RecursionHelper模块，然后在创建folderTree指令时使用RecursionHelper服务，并且在compile方法中调用RecursionHelper的compile方法，即可修复上面的问题。