javascript - Isolated scope on button click not working -
i newbie angularjs. working on directives in angularjs have followed example of book angularjs directive. tried of samples stuck 1 of example of similar need implement in application.
the code :
<html> <head> <link rel="stylesheet" href="style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-app="directiveapp"> <!-- 2 way binding --> <div ng-init="title = 'hello world'; subtitle = 'i app'"> <h2 id="apptitle">{{title}}</h2> <h3 id="appsub">{{subtitle}}</h3> <button id="newapptitle" ng-click="setapptitle('app 2.0')">upgrade me!</button> <div my-scoped-directive msd-title="i'm directive, within app{{title}}" msd-subtitle="subtitle"> <h4 id="directivetitle">{{title}}</h4> <button id="newdirtitle" ng-click="setdirectivetitle('bob')">bobit!</button> <button id="newdirsub" ng-click="setdirectivesubtitle('time submerge')">empty ballasts!</button> </div> </div> </div> <!-- end of directiveapp --> </body> </html> script.js
var app = angular.module('directiveapp', []); app.directive('myscopeddirective', function() { return { restrict: 'ea', scope : { 'title' : '@msdtitle', 'subtitle' : '=msdsubtitle' }, link : function ($scope, $element, $attrs) { console.log($scope) $scope.setdirectivetitle = function (title) { $scope.title = title; }; $scope.setdirectivesubtitle = function (subtitle) { $scope.subtitle = subtitle; }; } }; }); the problem when clicking on buttons no click events firing. texts not getting changed. on clicking bobit button text should changed hello world i'm directive, within app hello world
here attaching plunker link : http://plnkr.co/edit/ndnwdqr9xcph6unvjwlc?p=preview
that's not correct way since directive applied on element compiles directive inside element not have scope of directive contains scope of controller. app.js
var app = angular.module('directiveapp', []); app.directive('myscopeddirective', function() { return { restrict: 'ea', scope : { 'title' : '@msdtitle', 'subtitle' : '=msdsubtitle' }, templateurl:'main.html', link : function ($scope, $element, $attrs) { console.log($scope) $scope.setdirectivetitle = function (title) { $scope.title = title; }; $scope.setdirectivesubtitle = function (subtitle) { $scope.subtitle = subtitle; }; } }; }); check out updated plunkr link
Comments
Post a Comment