angularjs - ng-click is not working when passing function into directive -
i try store menu information in array(menu_entries in example) , render them directive(mymenu), functions stored in array seem not work ng-click.
here example: http://jsfiddle.net/5caqx/
menu1 , menu2 not working, menu3 works.
js code:
var my_app; my_app = angular.module('myapp', []); my_app.controller('mypagectrl', [ '$scope', function($scope) { $scope.menu_entries = [ { name: 'menu1', onclick: $scope.onmenu1click }, { name: 'menu2', onclick: $scope.onmenu2click } ]; $scope.say_something = ""; $scope.onmenu1click = function() { return $scope.say_something = "lalala"; }; $scope.onmenu2click = function() { return $scope.say_something = "wawawa"; }; return $scope.onmenu3click = function() { return $scope.say_something = "rarara"; }; } ]); my_app.directive("mymenu", [ "$compile", function($compile) { return { restrict: 'e', replace: true, scope: { menue: '=' }, link: function(scope, elem, attrs) { elem.html('<div ng-repeat="me in menue"><li><div class="menu-btn" ng-click="me.onclick()"><div class="menu-text">{{me.name}}</div></div></li></div>'); return $compile(elem.contents())(scope); } }; } ]); html:
<!doctype html> <html> <head> <link href="../css/app.css" rel="stylesheet" /> <script src="../js/angular.min.js"></script> <script src="../js/app.js"></script> </head> <body ng-app="myapp"> <div ng-controller="mypagectrl"> <p> {{say_something}} </p> <ul> <my_menu menue="menu_entries"></my_menu> <li> <div class="menu-btn" ng-click="onmenu3click()"> <div class="menu-text"> menu3 </div> </div> </li> </ul> </div> </body> </html>
try this:
$scope.onmenu1click = function() { return $scope.say_something = "lalala"; }; $scope.onmenu2click = function() { return $scope.say_something = "wawawa"; }; //move code after creating $scope.onmenu1click , $scope.onmenu2click $scope.menu_entries = [ { name: 'menu1', onclick: $scope.onmenu1click //onmenu1click instead of menu1click }, { name: 'menu2', onclick: $scope.onmenu2click //onmenu2click instead of menu2click } ];
Comments
Post a Comment