How to update an AngularJS directive when a scope variable is updated via
ajax?
I have the following directive:
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;
}]);
Here's how I invoke it:
<my-filter model="someField" name="abcd" />
When the directive is first initalized, the someField is empty. Later on,
it is retrieved via ajax, and its value is filled in.
Question is, how can I watch for the value of someField to be updated?
When I do this:
scope.$watch(scope.model, function()
{
console.log( "changed, new val: ", scope.model );
}
This is only called once, when initalizing the directive, and the value
then is empty. When the value is retrieved via ajax (from $http.get), this
watch function is not called again. However, in other parts of the page
where I'm displaying {{someField}}, that value DOES update when ajax
request is fetched. So I don't think the problem has to do with doing
$scope.apply() after ajax request.
No comments:
Post a Comment