javascript - ng-click in angular directive - pass function from root scope -
fixed issue, here final fiddle shows working:
http://jsfiddle.net/mbaranski/tfleexdc/
i have directive:
var stepformdirective = function ($timeout, $sce, datafactory, $rootscope) { return { replace: false, restrict: 'ae', scope: { context: "=", title: "=" }, template: '<h3>{{title}}</h3><form id="actionform" class="step-form"></form><button ng-click="alert()" type="button">save</button>', link: function (scope, elem, attrs) { } } } how make alert() controller?
here fiddle: http://jsfiddle.net/mbaranski/tfleexdc/
angular can twitchy, i've built whole new fiddle demonstrate of "glue-up" pieces need make work.
first, weren't passing properties through directive, i've made adjustment:
// have pass function in attribute <hello-directive list="oslist" func="myfunc()"></hello-directive> second, using onclick instead of ng-click in template, part of problem, made switch:
// need use "ng-click" instead of "onclick" template: '<h3>{{list}}</h3><button ng-click="func()" type="button">button</button>', and lastly, need bind function in scope of directive, , call bound name:
scope: { list: "=", // bind function function attribute directive func: "&" }, all of glued looks this:
html
<div ng-controller="myctrl"> hello, {{name}}! <hello-directive list="oslist" func="myfunc()"></hello-directive> </div> javascript
var myapp = angular.module('myapp', []); function myctrl($scope) { $scope.name = 'angular directive'; $scope.oslist = "original value"; $scope.stufffromcontroller = {}; $scope.myfunc = function(){ alert("function in controller");}; }; var hellodirective = function() { return { scope: { list: "=", func: "&" }, // use new isolated scope restrict: 'ae', replace: false, template: '<h3>{{list}}</h3><button ng-click="func()" type="button">button</button>', link: function(scope, elem, attrs) { } }; }; myapp.directive("hellodirective", hellodirective);
Comments
Post a Comment