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

Answer 1

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'])

Answer 2

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>

Further Reading