2016-11-15 49 views
0

我创建了一个指令为:不能设置变量指令控制器

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
.directive('treeView', ['treeViewService', 'passClickService', '$compile', function (treeViewService, passClickService, $compile) { 
 

 
\t \t var controller = function() { 
 
\t \t \t var vm = this; 
 

 
\t \t \t vm.init = function (scope, element) { 
 
\t \t \t \t vm.element = element; 
 
\t \t \t \t vm.scope = scope; 
 
\t \t \t \t passClickService.register(vm.onClick); 
 
\t \t \t \t if (!vm.parentId) { 
 
\t \t \t \t \t var obj = angular.element($compile('<tree-branch ssc-id="{{vm.sscId}}" parent-id="{{vm.sscId}}" no-edit="{{vm.noEdit}}" can-delete="{{vm.canDelete}}"></tree-branch>')(vm.scope)); 
 
\t \t \t \t \t vm.element.append(obj); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t if (!vm.hasChildren) { 
 
\t \t \t \t \t \t vm.hasChildren = true; 
 
\t \t \t \t \t \t var myget = treeViewService.getChildren(vm.sscId); 
 
\t \t \t \t \t \t myget.then(function (data) { 
 
\t \t \t \t \t \t \t var objData = data.data || data; 
 
\t \t \t \t \t \t \t vm.children = objData.$values || objData; 
 
\t \t \t \t \t \t \t var obj = angular.element($compile('<tree-branch ng-repeat="child in vm.children" ssc-id="{{child}}" parent-id="{{vm.sscId}}"></tree-branch>')(vm.scope)); 
 
\t \t \t \t \t \t \t vm.element.append(obj); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t \t element.toggle(); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t var link = function (scope, element, attrs, vm) { 
 
\t \t \t var hasChildren = false; 
 
\t \t \t vm.init(scope, element); 
 
\t \t } 
 
\t \t return { 
 
\t \t \t restrict: 'E', 
 
\t \t \t scope: { 
 
\t \t \t \t sscId: '@', 
 
\t \t \t \t parentId: '@', 
 
\t \t \t \t noEdit: '@', 
 
\t \t \t \t noDelete: '@', 
 
\t \t \t }, 
 
\t \t \t controller: controller, 
 
\t \t \t controllerAs: 'vm', 
 
\t \t \t bindToController: true, 
 
\t \t \t replace: true, 
 
\t \t \t transclude: true, 
 
\t \t \t link: link, 
 
\t \t \t template: '<ul class="nav nav-list tree" style="margin-left:10px" id="tree{{vm.sscId}}"></ul>' 
 
\t \t } 
 
\t }]);

我第一次点击的对象,它应该载入所有的孩子。随后的每次点击都会切换列表的可见状态。这应该由vm.hasChildren变量来控制。但是,每当我单击对象时,vm.hasChildren都是未定义的。我可以设置这个变量,使它保持它的值,直到页面重新加载?

+0

在你的init函数中你使用了vm.hasChildren,但是你还没有声明。在初始化期间,您应该有逻辑来设置其正确的值。如果我在这里没有丢失东西 –

+0

我添加了vm.hasChildren = false作为init的第一行,现在它总是错误的。 – DrewB

+0

哦,我的坏。我错过了每次点击都想改变它的观点。所以你的init只会被调用一次,而不是每次点击。 hasChildren的检查和基于此的操作不应该是init的一部分。你将不得不将它移动到另一个函数,每次点击都会被调用。 –

回答

0

再一次,答案是,“我是个白痴。”我正在检查hasChildren在错误的地方。当然,在init中,孩子永远是假的。请忽略这个无趣的问题。

相关问题