Currently navigating through the complexities of angularJs, making progress, yet uncertain if the issue at hand stems from a directive-specific misconception or a broader misunderstanding.
Within my angular application, a directive is inheriting from its parent directives controller (though in reality, my app is structured differently). The parent controller executes an asynchronous task and I aim to have the child template reflect these changes accordingly.
The property in question is set after the child controller has completed its compile/link process. This property is already bound to the child template, so why does the template fail to update when the property is modified? What steps must be taken to achieve this?
To clarify, the provided code is greatly simplified (the asynchronous component involves a service with an $http call, and the template itself is quite complex as it requires using this property within a repeater), but essentially represents the current state of my app's code.
<div ng-app="myApp">
<dashboard>
<published></published>
</dashboard>
</div>
Angular JavaScript:
var app = angular.module('myApp', []);
app.directive('dashboard', function () {
return {
restrict: 'E',
controller: function ($scope) {
$scope.foo = '';
//Simulating an $http request
$scope.get = function () {
setTimeout(function() {
$scope.foo = "hello";
}, 1000);
};
$scope.get();
$scope.bar="world";
}
};
})
.directive('published', function ($compile) {
return {
restrict: 'E',
require: '^dashboard',
template : '<span>{{foo}} {{bar}}</span>',
link: function ($scope, element, attrs) {
console.log('scope', $scope); //Viewing foo in console as expected due to inheritance
console.log('scope.foo', $scope.foo); //Not present due to asynchronous nature
}
};
});