I've defined a Angular directive, which seems to be working fine --- provided I hard-code it's attribute value. For example:
<notes-history application-id="11"></notes-history>
{{applicationid}}
<notes-history application-id="{{applicationid}}"></notes-history>
The first <notes-history> directive works fine. The plain text binding works fine. However, when the directive's link() function is called the second time, the application-id (based on the 3rd parameter passed to link()) is an empty string. How do I get it to bind to the attribute?
Update:
Here's the (mostly) full code for the directive. (Javascript generated from TypeScript)
var notesHistory = (function () {
function notesHistory(notesService, alertsService) {
this.notesService = notesService;
this.alertsService = alertsService;
var directive = {};
directive.priority = 0;
directive.restrict = "EA";
directive.scope = { applicationId: "@applicationId" };
directive.replace = true;
directive.transclude = false;
directive.templateUrl = "app/views/notesHistory.html";
directive.link = function (scope, instanceElement, instanceAttributes, controller, transclude) {
// elided.
// instanceAttributes.applicationId is correct here
// when hard-code, and '' when bound.
});
};
return directive;
}
return notesHistory;
})();
app.directive("notesHistory", ["notesService", "alertsService", notesHistory]);
I have actually figured out my problem, and it turns out to be unrelated to the directive.
The problem was the controller's first (and essentially, only) action was to make an async web service call to get the data. So the order of events was:
Since this has become a completely different problem, I'll create a new question for it.
It should work. Here's a super simple plunkr that examplifies it: http://plnkr.co/edit/tYFbxxAxwLXAzaNyCOwE?p=preview
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<test foo="bar"></test>
<test foo={{name}}></test>
</body>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.directive('test', function() {
return {
scope: {
foo: '@'
},
template: 'Name: {{foo}}'
};
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments