AngularJS -如何在链接函数中获得独立的指令作用域变量？

Question

请看下面的代码。

指令：

app.directive("filterTree", function() {
    return {
        restrict: "AE",
        controller: function($scope, $http){
            $scope.treeNodes = [];
            var filterItemsUrl = "/api/v1/users/userId/filter_nodes";
            $http.get(filterItemsUrl).success(function(response) {
                var filterItems = response["data"]["filter_nodes"];
                filterItems.map(function(item){
                    $scope.treeNodes.push({
                        id: item.id,
                        pId: item.pid,
                        name: item.name,
                        open: item.open,
                        checked: item.checked
                    });
                });
            });
        },
        link: function(scope, element, attributes, controller){
            var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

            $.fn.zTree.init(element, setting, scope.treeNodes);
        }
    };
});

html：

<ul class="ztree" filter-tree="" id="filterTree"></ul>

scope.treeNodes在我的链接函数中是不可访问的。如何在链接函数中访问这个隔离作用域变量？

Answer 1

有没有办法告诉链接函数等待控制器功能完全执行？

您需要使用httpPromise到链执行$.fn.zTree.init。

app.directive("filterTree", function() {
    return {
        restrict: "AE",
        controller: function($scope, $http, $element){
            $scope.treeNodes = [];
            var filterItemsUrl = "/api/v1/users/userId/filter_nodes";
            //save httpPromise
            var httpPromise = $http.get(filterItemsUrl);
            //chain from httpPromise
            httpPromise.then(function(response) {
                var filterItems = response.data["data"]["filter_nodes"];
                filterItems.map(function(item){
                    $scope.treeNodes.push({
                        id: item.id,
                        pId: item.pid,
                        name: item.name,
                        open: item.open,
                        checked: item.checked
                    });
                });
                //return treeNodes for chaining zTree.init
                return $scope.treeNodes;
            }).then (function onFulfilled (treeNodes) {
                var setting = {
                    check: { enable: true },
                    data: { simpleData: { enable: true }
                };
                //execute zTree.init
                $.fn.zTree.init($element, setting, treeNodes);
            })
        },
        link: function(scope, element, attributes, controller){
        }
    };
});

$q服务在执行.then方法的onFulfilled函数之前等待承诺的实现。这样，zTree.init的执行就会被适当地延迟。

有关链接承诺的更多信息，请参见AngularJS $q服务API引用-链接承诺。

还请注意控制器函数中本地$element的注入。

有关控制器局部变量的详细信息，请参阅AngularJS $compile服务API引用-控制器。

此外，.success和.error服务的$http方法已经被废弃了。有关这方面的更多信息，请参见AngularJS $http服务API参考--反对通知。

Answer 2

首先，您创建的指令不具有隔离作用域，而是具有继承的作用域，即它与父控制器共享作用域。

对于隔离作用域，必须将指令的作用域定义为如下所示的对象：

scope: {
    //your binded attributes here
} 

对于访问$scope.treeNodes，将其作为属性传递：

<ul class="ztree" filter-tree tree-nodes="treeNodes" id="filterTree"></ul>

并将其绑定到指令中：

restrict: 'AE',
scope: {
    tree_nodes: '=treeNodes' //'=' for two way binding
}

scope.tree_nodes现在以两种方式绑定到控制器的$scope.treeNodes。

Answer 3

scope.treeNodes在链接函数中是可访问的，请看下面的链接(这里的超级链接)。

这里的问题是，您正在控制器中执行HTTP请求(这是异步请求)，在加载数据时，链接函数已经执行，这就是为什么没有加载数据。

您需要以这样的方式重写它，以便在执行Link函数时，在此之前由http请求加载数据。