Question

我在指令中遇到数据绑定问题，该指令调用另一个指令。

这是主要指令：

var app = angular.module('app');

app.directive("myMainDirective", function ($http) {
return {
    scope: {
        paramId: '='
    },
    link: function (scope) {
        $http.get('some/url/' + scope.paramId+ '.json'
        ).success(function (data) {
                scope.idFromServer = data;
            });
    },
    template: '<span other-directive id="idFromServer"></span>'
}
});

这是另一个指令：

var app = angular.module('app');

app.directive("otherDirective", ['$http', function(http) {
return {
    template: "<span>{{name}}</span>",
    scope: {
        id: "="
    },
    link: function(scope) {
        http.get('another/url/' + scope.id + '.json').then(function(result) {
            scope.name = result.data.name;
        }, function(err) {
            scope.name = "unknown";
        });
    }
}
}])

和html代码一起调用主要指令：

<span my-main-directive param-id="myObject.id"></span>

当调用“other-directive”时，“idFromServer”不绑定，并且是“未定义”，因此它会导致显示“未定义”。

我可能错过了一些愚蠢的东西，但我看不出是什么...... （我的代码很可能不是最好的，我对angularjs很新，特别是指令，我尝试了很多方法来实现我想要的。）

Answer 1

根据我的评论，这是使用示波器可行的一种方式。$ watch：

scope.$watch('id', function(id) {
    $http.get('some/url/' + id + '.json')
        .success(function (data) {
            scope.idFromServer = data;
        });
};

这将进入嵌套指令的链接函数。

Answer 2

我建议的方法之一是不要对=变量使用双向（idFromServer）绑定，使用{{idFromServer}}插值指令为属性赋值，＆amp;然后使用$attr.$observe它将在评估插值时调用。

<强> myMainDirective

app.directive("myMainDirective", function ($http) {
return {
    scope: {
        paramId: '='
    },
    link: function (scope) {
        $http.get('some/url/' + scope.paramId+ '.json'
        ).success(function (data) {
                scope.idFromServer = data;
            });
    },
    template: '<span other-directive id="{{idFromServer}}"></span>'
}
});

<强> otherDirective

app.directive("otherDirective", ['$http', function(http) {
    return {
        template: "<span>{{name}}</span>",
        scope: true, //isolated scope
        link: function(scope, element, attr) {
            attr.$observe(attr.id, function(newVal) {
                http.get('another/url/' + newVal + '.json').then(function(result) {
                    scope.name = result.data.name;
                }, function(err) {
                    scope.name = "unknown";
                });
            });
        }
    }
}])

Answer 3

由于javascript是异步的，因此当id中的请求运行时，您的两个ajax请求基本上同时运行，undefined为other-directive。

如果您想尝试对此进行测试，只需为idFromServer设置默认值即可。 other-directive中的请求将使用默认值运行。

编辑：回应您的评论，这是一个非常广泛的问题，有很多解决方案。我能给你的最好答案很简单，就是从来没有在你的链接函数中运行任何逻辑，只需定义指令的行为和属性 - 这是链接函数的用途。模板立即使用，您无法改变它。

在这种情况下，您可以获取在父作用域中准备的数据并在属性中传递数据。

Angular JS - 指令中的数据绑定不起作用

3 个答案: