Question

我试图弄清楚从服务中将数据提取到我的指令的正确方法。出于某种原因，在加载数据时不会触发my $ watch语句。

link: function(scope, element, attrs){

            scope.loadtext = testService.getJSON();

            scope.$watch(scope.loadtext, function(newValue, oldValue){

                if (newValue !== oldValue){
                    alert("watch working");
                    element.addClass("red");
                    element.html(newValue.ok);
                }
            });


        }

Simple JSFiddle http://jsfiddle.net/jamesamuir/m85Ka/1/

但是，我不确定我是否正确地接近这一点。我试图深入研究指令的文档，但它似乎没有提供解决这个问题的很多见解。

Answer 1

我不确定你的最终目标是什么，但我认为你没有采用正确的方法。无论如何，我更新了jsfiddle并保留了$ watch，虽然它不需要。

问题在于：

this.getJSON = function() {
    $http.get('http://ricardohbin.com/cors/testcors.php')
        .success(function(data) {
            $rootScope.$apply(function(){
                 alert(data);
                return data;
            });
        }).
        error(function(data, status, headers, config) {
            alert(status + " | bad");
        });
}

您的return data未与getJSON相关联，而是与此代码中的$rootScope.$apply回调相关联。在这种情况下你不能return，而是使用回调，因为数据会异步加载：

testService.getJSON(function(data) {
    scope.loadtext = data;
});

而不是：

$scope.loadtext = testService.getJSON();

http://jsfiddle.net/m85Ka/10/

Answer 2

虽然Tim Withers建议适用于您的问题，但正确的加载数据的方法可以是视图的控制器功能，也可以是指令自己的控制器。

AngularJS指令和从服务中提取数据

2 个答案: