angularjs - Custom directive not outputting correct result -
i have following custom directive customerdirective :
var app = angular.module('directiveapp', []); var dircontroller = app.controller('directivecontroller', function() { this.customer = { name: 'james', address: 'mellieha' }; }); dircontroller.directive('customerdirective', function() { return { template: 'name: {{customer.name}} address: {{customer.address}}' }; }); and invoked in index.html follows :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>example - example-example12-production</title> <script src="../../bower_components/angular/angular.min.js"></script> <script src="directive.js"></script> </head> <body ng-app="directiveapp"> <div ng-controller="directivecontroller"> <div customer-directive></div> </div> </body> </html> however result outputted not expected:
name: address: for reason, angular expressions containing customer details not being captured. resigned fact overlooking obvious alas have not managed far.
ps: example taken directly angularjs developer guide particularly this section
you have 2 options solve this:
example $scope:
var app = angular.module('directiveapp', []); app.controller('directivecontroller', function($scope) { $scope.customer = { name: 'james', address: 'mellieha' }; }); app.directive('customerdirective', function() { return { template: 'name: {{customer.name}} address: {{customer.address}}' }; }); example controller-as (without $scope):
app.controller('directivecontroller', function() { this.customer = { name: 'james', address: 'mellieha' }; }); app.directive('customerdirective', function() { return { template: 'name: {{dirctrl.customer.name}} address: {{dirctrl.customer.address}}' }; }); <body ng-app="directiveapp"> <div ng-controller="directivecontroller dirctrl"> <div customer-directive></div> </div> </body> 
Comments
Post a Comment