javascript - Modify value in directive's scope from separate directive -
let's have chart directive (like pie chart) , settings directive contains form used modify settings chart directive. settings directive displayed in modal dialogue.
how can create changes in settings directive take effect in chart directive?
there can multiple chart directives, each independent settings. settings each chart shown tabs in settings modal, left out maintain illustration simple.
here things have tried/considered:
"use mill share settings values." fails because might have multiple chart directives, each separate settings.
"have settings directive kid of chart directive." settings directive cannot kid of chart directive because needs rendered in modal.
here plunkr along w/ relevant snippets:
<div ng-controller="controller"> <a href ng-click="showsettings()">settings</a> <chart></chart> <chart></chart> </div> js:
app.controller("controller", function ($scope, $modal) { $scope.showsettings = function () { $modal.open({ scope: $scope, template: "<h1>settings modal</h1><settings></settings>" } ); } }); app.directive("chart", function () { homecoming { restrict: 'e', template: '<h1>chart directive</h1><p>somechartsetting: {{somechartsetting}}</p>', controller: function chartcontroller($scope) { // value represents setting need modify via settings modal. $scope.somechartsetting = "on"; } } }) app.directive("settings", function () { homecoming { restrict: 'e', template: '<a href ng-click="togglesettings()">toggle somechartsetting</a>', controller: function settingscontroller($scope) { $scope.togglesettings = function () { console.log("toggle clicked"); // need modify somechartsetting value chart. } } } })
try hope helps:
<!doctype html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script> </head> <body ng-app="app"> <div ng-controller="controller"> <a href ng-click="showsettings()">settings</a> <chart></chart> <chart></chart> </div> <script> var app = angular.module("app", ['ui.bootstrap']); app.controller("controller", function ($scope, $modal) { $scope.showsettings = function () { $modal.open({ scope: $scope, template: "<h1>settings modal</h1><settings></settings>" } ); } }); app.directive("chart", function () { homecoming { restrict: 'e', template: '<h1>chart directive</h1><p>somechartsetting: {{somechartsetting}}</p>', controller: function chartcontroller($scope) { // value represents setting need modify via settings modal. $scope.somechartsetting = "on"; } } }) app.directive("settings", function () { homecoming { restrict: 'e', template: '<a href ng-click="togglesettings()">toggle somechartsetting</a>', controller: function settingscontroller($scope) { $scope.togglesettings = function () { // need modify somechartsetting value chart. } } } }) </script> </body> </html> http://plnkr.co/edit/g0ogmzlsgyaskumh4aho?p=preview
javascript angularjs angular-directive
No comments:
Post a Comment