Refresh the data in controller when scope gets changed in AngularJS

Question

I'm pretty new with angular and I've read a lot of threads here and googled this topic but I cannot get a clear answer. what i am really trying to achieve is. lets suppose I have a controller A, this is a actual source for data. I passed it to one directive through binding it to a HTML. From this directive I am acually getting the source at another controller. So I need to find out the way where I can change the data of controller when the data of controller A gets changed.

Controller A

angular.module('page.leadAndOpportunity.ctrl', []).controller('LeadAndOpportunityController', ['$scope', '$rootScope', '$timeout', function ($scope, $rootScope, $timeout, leadAndOpportunityService) {

    $scope.selectDataSource = function (condition) {
        var dataSource = [];
        var dataSource = $scope.leadsDataSource.filter(function (item) {
            return item.typeName === condition;
        });
        $scope.leadsDataSource = [];
        $scope.leadsDataSource = dataSource;
        console.log($scope.leadsDataSource);
    }

}]);

HTML

<ng-senab-grid datasource="{{ leadsDataSource }}" defaultdata="{{defaultColumns}}" skipdata="{{ skipColumns }}" enablepersonalisation="true"></ng-senab-grid>

Directive

angular.module('page.gridView.drct', []).directive("ngSenabGrid", ["$rootScope", function ($rootScope) {
        return {
            restrict: "E",
            templateUrl: "pages/gridView/page.gridView.tpl.html",
            scope: {
                enablePersonalisation: "@enablepersonalisation",
                datasource: "@datasource",
                defaultdata: "@defaultdata",
                skipdata: "@skipdata"
            },
        }
    }]
);

Controller B

 var _datasource = JSON.parse($scope.datasource);
//rest the data follows

So when $scope.leadsDataSource gets changes on Controller A, then the

var _datasource = JSON.parse($scope.datasource);

also should get changed

I dont know if it is possible or not. But I need to change the data Thanks in advance

have isolated scope variable as either < or = to preserve the type of object, if you use @ then all data will get stringified. — Pankaj Parkar
– Pankaj Parkar, Commented Jun 16, 2016 at 11:28
like? if you can explain me ...I have already said, I am new to Angular stuff — Abhishek Asthana
– Abhishek Asthana, Commented Jun 16, 2016 at 11:29
when we bind something to html by controller, it is available in directive, and its vice versa is also possible.@gaurav5430 — Abhishek Asthana
– Abhishek Asthana, Commented Jun 17, 2016 at 4:04

Sachila Ranawaka · Accepted Answer · 2016-06-16 12:31:28Z

2

remove the curly brackets of the variable.since this is a directive no need to add curly brackets

<ng-senab-grid datasource="leadsDataSource" defaultdata="defaultColumns" skipdata="skipColumns" enablepersonalisation="true"></ng-senab-grid>

if u want to get the value of the variable then use "=" if u use "&" it will only get the string

 scope: {
            enablePersonalisation: "=enablepersonalisation",
            datasource: "=datasource",
            defaultdata: "=defaultdata",
            skipdata: "=skipdata"
           },

also inject the directive module to ur angular module

angular.module('page.leadAndOpportunity.ctrl', ['page.gridView.drct'])

answered Jun 16, 2016 at 12:31

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Asthana Over a year ago

are you sure this will work, I dont think so. This will update the directive, but data will not get refreshed, as new data is not available to the controller @IT13122256 Ranawaka R.A.S.M

Sachila Ranawaka Over a year ago

can u provide a plnkr or something

Keshan Nageswaran · Accepted Answer · 2017-04-04 15:17:08Z

A simple explanation to keep in mind about different types of scopes would be below.

@ Attribute string binding (String)

= Two-way model binding (model)

& Callback method binding (method)

According this you should be using Two-way binding instead of Attribute string binding because The model in parent scope is linked to the model in the directive's isolated scope. Changes to one model affects the other, and vice versa.

I would prefer using bindToController property definition in the directive. When set to true in a directive with isolated scope that uses controllerAs, the component’s properties are bound to the controller rather than to the scope. That means, Angular makes sure that, when the controller is instantiated, the initial values of the isolated scope bindings are available on this, and future changes are also automatically available.

Check the Below sample fiddle example for more understanding

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function($scope) {

  $scope.change = function() {
    $scope.fullname = 'Keshan';
  }
  $scope.reset = function() {
    $scope.fullname = 'Fill Your Name';
  }
});

myApp.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },

    controller: function($scope) {
      this.name = 'Fill Your Name';
    },
    controllerAs: 'ctrl',
    bindToController: true,
    template: '{{ctrl.name}}',
  };
});

<script src="https://code.angularjs.org/1.3.7/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
  <button ng-click="change()">Change</button>
  <button ng-click="reset()">Reset</button>
  <my-directive name="fullname"></my-directive>
</div>

Collectives™ on Stack Overflow

Refresh the data in controller when scope gets changed in AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related