javascript - Angular not updating view when changed by service called from controller -
it seems when use service, called controller, within directive, update array in main controller (mycontroller in example), angular doesn't update view.
however if leave service out, , have directive directly update array, view updated.
(in example below have, in mydirectivescontroller there 2 lines, 1 commented out version works - changing gridindirective directly....the line below calls myservice, gridindirective array locally, , seem change locally, view not updated)
if run example idea click on colored div , elements of array, printed ng-repeat loop, changed.
i have experimented using $scope.$apply() in few places (a) didn't work , (b) understanding that should necessary if making changes outside of angular...and don't think am.
so question is, how version of grid updated in myservice update view, , why doesn't work way have it?
thanks in advance takes time have look.
'use strict'; (function() { var ssheet = angular.module('ssheet', []); ssheet.factory('myservice', [function () { var myservicefunction; return { myservicefunction: function (grid) { alert('myservicefunction'); alert('grid given myservicefunction ' + grid.tostring()); grid = ['now', 'the', 'grid', 'has', 'changed']; alert('grid in myservicefunction changed ' + grid.tostring()); } } }]); ssheet.controller('mycontroller', ['$scope', function ($scope) { $scope.gridinmycontroller = ['foo','bar','dog','cat']; // 2d array, simplified testing }]); ssheet.controller('mydirectivescontroller', ['myservice', '$scope', function (myservice, $scope) { $scope.changegrid = function () { alert('mydirectivescontroller.changegrid'); //$scope.gridindirective = ['now', 'the', 'grid', 'has', 'changed']; //this worked myservice.myservicefunction($scope.gridindirective); // doesn't work } }]); ssheet.directive('gridtools', ['myservice', function (myservice) { return { restrict: 'e', replace: true, scope: { gridindirective: '=gridinelement', }, template: '<div class="grid-tools-style" grid-in-element="gridinmycontroller" ng-click="changegrid()">click div change grid</div>', controller: 'mydirectivescontroller', } }]); })();.grid-tools-style { background-color: #c68700; } .grid-tools-style:hover { cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="ssheet"> <div ng-controller="mycontroller"> <grid-tools></grid-tools> <div ng-repeat="item in gridinmycontroller"><p>{{item}}</p></div> </div> </body>
you can return new grid directive controller method , assign scope variable of grid of directive.
see demo below , in jsfiddle.
'use strict'; (function() { var ssheet = angular.module('ssheet', []); ssheet.factory('myservice', [ function() { //var myservicefunction; return { myservicefunction: function(grid) { //alert('myservicefunction'); //alert('grid given myservicefunction ' + grid.tostring()); grid = ['now', 'the', 'grid', 'has', 'changed']; //alert('grid in myservicefunction changed ' + grid.tostring()); return grid; } } } ]); ssheet.controller('mycontroller', ['$scope', function($scope) { $scope.gridinmycontroller = ['foo', 'bar', 'dog', 'cat']; // 2d array, simplified testing } ]); ssheet.controller('mydirectivescontroller', ['myservice', '$scope', function(myservice, $scope) { $scope.changegrid = function() { //alert('mydirectivescontroller.changegrid'); //$scope.gridindirective = ['now', 'the', 'grid', 'has', 'changed']; //this worked $scope.gridindirective = myservice.myservicefunction($scope.gridindirective); // doesn't work console.log($scope.gridindirective); } } ]); ssheet.directive('gridtools', ['myservice', function(myservice) { return { restrict: 'e', replace: true, scope: { gridindirective: '=gridinelement', }, template: '<div class="grid-tools-style" grid-in-element="gridinmycontroller" ng-click="changegrid()">click div change grid</div>', controller: 'mydirectivescontroller', } } ]); })();.grid-tools-style { background-color: #c68700; } .grid-tools-style:hover { cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="ssheet"> <div ng-controller="mycontroller"> <grid-tools></grid-tools> <div ng-repeat="item in gridinmycontroller"> <p>{{item}}</p> </div> </div> </div>
Comments
Post a Comment