我是一个非常新的角度,我在这里阅读了很多帖子并搜索了这个主题,但我无法得到一个明确的答案。我真正想要实现的是。假设我有一个控制器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);
也应该改变
我不知道是否可能。但我需要更改数据 提前致谢
答案 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确保在实例化控制器时,隔离范围绑定的初始值可用于此,并且未来的更改也将自动可用。
查看下面的示例小提琴示例以获得更多理解
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;