Utilizing an http request, I am retrieving data from a json file that I then utilize in my controller.
app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) {
//Getting data from the service
loaderService.getLoadedHtml().then(function (result) {
$scope.fields = result.data;
});
}]);
I am interested in updating a directive whenever $scope.fields changes such as:
app.directive('dform', function () {
return {
scope: {
action: '@',
method: '@',
html: '='
},
link: function (scope, elm, attrs) {
var config = {
"html": scope.fields
};
scope.$watch('fields', function (val) {
elm.dform(config);
});
//console.log(config);
//elm.dform(config);
}
};
})
Here is how I implement this directive:
<div html="fields" dform></div>
However, when $scope.fields changes in my case, I receive scope as undefined in my directive's $watch function.
Query:
Is there a way to obtain the updated value for scope.fields in the scope.$watch function?