在AngularJS中更改范围时刷新控制器中的数据

时间:2016-06-16 11:18:48

标签: angularjs angularjs-directive angularjs-controller

我是一个非常新的角度,我在这里阅读了很多帖子并搜索了这个主题,但我无法得到一个明确的答案。我真正想要实现的是。假设我有一个控制器A,这是一个实际的数据源。我通过将它绑定到HTML将其传递给一个指令。从这个指令我真正得到另一个控制器的源。 因此,当控制器A的数据发生变化时,我需要找出可以更改控制器数据的方式。

控制器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>

指令

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"
            },
        }
    }]
);

控制器B

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

因此当$scope.leadsDataSource控制器A 上进行更改时,

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

也应该改变

我不知道是否可能。但我需要更改数据 提前致谢

2 个答案:

答案 0 :(得分:2)

删除变量的大括号。因为这是一个指令,不需要添加大括号

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

如果你想获得变量的值,那么使用&#34; =&#34;如果你使用&#34;&amp;&#34;它只会得到字符串

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

还将指令模块注入ur angular module

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

答案 1 :(得分:2)

关于不同类型的范围的一个简单解释如下。

@属性字符串绑定(String)

=双向模型绑定(模型)

&回调方法绑定(方法)

根据这个,您应该使用双向绑定而不是属性字符串绑定,因为父作用域中的模型链接到指令的隔离范围中的模型。对一个模型的更改会影响另一个模型,反之亦然。

我更喜欢在指令中使用 bindToController 属性定义。在具有使用controllerAs的隔离范围的指令中设置为true时,组件的属性将绑定到控制器而不是范围。 这意味着,Angular确保在实例化控制器时,隔离范围绑定的初始值可用于此,并且未来的更改也将自动可用。

查看下面的示例小提琴示例以获得更多理解

&#13;
&#13;
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}}',
  };
});
&#13;
<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>
&#13;
&#13;
&#13;

Further Reading