范围。在AJAX请求后没有调用指令中的$ watch

时间:2013-08-09 02:43:19

标签: javascript angularjs

我有以下指令:

MyApp.directive('myFilter', ['$filter','$rootScope',
function($filter, $rootScope)
{
    var dir = {};
    dir.restrict = 'E';
    dir.templateUrl = 'views/myFilter.html';
    dir.replace = true;
    dir.scope = 
        {
            name: '@',
            model: '=',
        };

    dir.link = function(scope,el,attrs)
    {        
        //stuff here
    }


    return dir; 
}]);

以下是我如何调用它:

<my-filter model="someField" name="abcd" />

当指令首次初始化时,someField为空。稍后,它将通过ajax检索,并且其值已填入。

问题是,如何查看要更新的someField的值?当我从链接方法执行此操作时:

scope.$watch(scope.model, function()
{
   console.log( "changed, new val: ", scope.model );
}

仅在指令初始化时调用一次,然后该值为空。当通过ajax(来自$http.get)检索值时,不会再次调用此监视功能。但是,在我正在显示{{someField}}的页面的其他部分中,该值在获取ajax请求时会更新。所以我不认为问题与在ajax请求之后执行$scope.apply()有关。

编辑: someField在控制器中分配。这是代码:

MyApp.controller('myCtrl', 
['$scope', '$rootScope', '$routeParams', 
'ajax', '$filter',

function($scope, $rootScope, $routeParams, ajax, $filter)
{
    var userId = parseInt( $routeParams.userId );        
    $scope.loaded = false;
    $scope.someField = ""; //initalize with empty value

    var load = function(data)
    {
        $scope.loaded = true;
        $scope.someField = data.someField;            
    };        

    ajax.getUser(userId).success(load);               
}
]);

方法ajax.getUser()执行$http.get()并返回其promise。在上面的代码中,调用load方法设置someField的值。

1 个答案:

答案 0 :(得分:92)

$watch期望一个表达式可以是函数或字符串。因此,如果将其更改为

,它将起作用
scope.$watch('model', function() { ... });

scope.$watch(function() { return scope.model; }, function() { ... });

查看this jsFiddle