javascript - Cannot get '&' prefix working when defining isolated scope in basic angular directive -
i'm boning on angular directives , having trouble isolated scope. i'm making basic directive/controller , trying throw alert on ng-click within directive setting scope attribute '&' prefix. i've been staring @ 45 minutes , can't see i'm doing wrong, nothing happening when clicking button (the other 2 prefixes working though). here code directive/controller:
(function() { 'use strict'; angular .module('mepracticing') .directive('practicedirective', practicedirective); function practicedirective() { var directive = { restrict: 'ae', scope: { movie: '=', rating: '@', display: '&' }, template: '<div>movie: {{movie}}</div>' + "enter movie: <input type ='text' ng-model='movie'>" + "<div>rating: {{rating}}</div>" + "<div><button ng-click='displaymovie(movie)'>click me</button></div>" }; return directive; } })(); (function() { 'use strict'; angular .module('mepracticing') .controller('practicecontroller', practicecontroller); function practicecontroller($scope) { $scope.movie = 'the big lebowski'; $scope.rating = 1000101010; $scope.displaymovie = function(movie) { alert("movie :" + movie); } } })(); and here html:
<html> <head> <title>directive practice</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body ng-app="mepracticing"> <h1>header</h1> <div ng-controller="practicecontroller"> <practice-directive movie="movie" display="display(movie)" rating="{{rating}}"></practice-directive> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="app.js"></script> <script src="mydirective.js"></script> </body> </html> the app.js 1 line create module:
angular.module('mepracticing', []); if can give me tips on why '&' isn't working i'd appreciate it. thank you!
edit: made jsfiddle it: https://jsfiddle.net/hozxz5n4/
it occurs because when using directive there not function called "display", need pass declared function:
<practice-directive movie="movie" display="displaymovie(movie)" rating="{{rating}}"></practice-directive> and in directive call display prop function:
(function() { 'use strict'; angular .module('mepracticing') .directive('practicedirective', practicedirective); function practicedirective() { var directive = { restrict: 'ae', scope: { movie: '=', rating: '@', display: '&' }, template: '<div>movie: {{movie}}</div>' + "enter movie: <input type ='text' ng-model='movie'>" + "<div>rating: {{rating}}</div>" + "<div><button ng-click='display()'>click me</button></div>" }; return directive; } })(); wiki
Comments
Post a Comment