在指令范圍和控制器$ scope之間共享數據？
[英]Share data between directive scope and controller $scope?
問題描述
在這里，我為日期選擇器創建了一些示例，它工作正常，但我需要動態設置最小和最大日期..所以我從Html傳遞開始和結束日期，如my-datepicker min =“2013-07-23” max =“2015-07-23”在指令范圍內我得到了值，我需要在控制器中設置這個值$ scope.datepickerOptions = {startDate：min，endDate：max}這樣的事情..
var app = angular.module('myapp', ['ng-bootstrap-datepicker']) app.directive('myDatepicker', function() { return { restrict: 'E', template: '<input type="text" ng-datepicker ng-options="datepickerOptions" ng-model="ngModel">', scope: { date: '=', ngModel: '=', min: '=', max: '=', }, controller: function($scope) { $scope.datepickerOptions = { format: 'yyyy-mm-dd', autoclose: true, weekStart: 0, startDate :'2013-07-23', endDate:'2015-07-23' }; } }; }) app.controller('AppCtrl', ['$scope', function ($scope) { $scope.date = '2013-08-12' }]); var appboot = angular.bootstrap(document, ['myapp']);
<link href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/> <link href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script> <body> <div> <div ng-app="myapp" ng-controller="AppCtrl"> <my-datepicker ng-model ="date" min="2013-07-23" max="2015-07-23"></my-datepicker> <input id="datepickerMirror" type="text" data-ng-model="date"> </div> </div> </body>
2 個解決方案
解決方案1
1 已采納 2015-12-31 15:08:35
在指令控制器$ 范圍從指示隔離范圍。 您可以從$ scope.min和$ scope.max中獲取值。
更新您的代碼無法執行此操作的原因是您使用'='綁定，這會導致您的指令在您的范圍上查找名為2013-07-23的變量。 您需要將值放在變量中，或者將綁定更改為“@”並使用插值（花括號{{value}}），或者用雙引號內的單引號括住日期值，如min="'2013-07-23'" max="'2015-07-23'" 。
https://plnkr.co/edit/Gp5SBtIAuLq5BzzIdKfp?p=preview
var app = angular.module('myapp', ['ng-bootstrap-datepicker'])
app.directive('myDatepicker', function() {
return {
restrict: 'E',
template: '<input type="text" ng-datepicker ng-options="datepickerOptions" ng-model="ngModel">',
scope: {
dateval: '=',
ngModel: '=',
min: '=',
max: '=',
},
controller: function($scope) {
$scope.datepickerOptions = {
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 0,
startDate : $scope.min,
endDate: $scope.max
};
}
};
})
app.controller('AppCtrl', ['$scope', function ($scope) {
$scope.dateval = '2013-08-12';
$scope.min = '2013-07-23';
$scope.max = '2015-07-23';
}]);
var appboot = angular.bootstrap(document, ['myapp']);
HTML
<!DOCTYPE html>
<html>
<head>
<link href="//rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css" rel="stylesheet"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<div ng-app="myapp" ng-controller="AppCtrl">
<my-datepicker ng-model="dateval" min="min" max="max"></my-datepicker>
<input id="datepickerMirror" type="text" data-ng-model="dateval">
</div>
</div>
</body>
</html>
解決方案2
0 2015-12-31 20:03:02
正如前面回答的更新注釋中所提到的，它不能在UPDATE上工作的原因是你將“綁定”（范圍參數與“=”）一個字符串文字。 當您嘗試設置該變量時，您可能還會收到控制台錯誤，這是對象“非分配”的行。
話雖如此，你的指令是否需要一個孤立的范圍？ 如果您只是使用“scope：true”設置指令，那么您的指令將原型繼承父作用域。 這降低了便攜性，但在這一點上看起來並不像你那樣。
要設置有用的原型繼承，您還需要在HTML視圖文件中使用ng-controller的“as”語法。 為了舉例，讓我們說：
ng-controller="AppCtrl as appCtl"
然后將datepickerOptions的初始化從指令移動到主AppCtrl控制器中。 就個人而言，我更喜歡“dot”語法，而不是使用難以跟蹤的變量亂丟范圍，因此將其分配給控制器而不是范圍：
this.datepickerOptions = { /* min, max, etc */ }
現在在您的指令中（使用范圍：true），您可以通過指令$ scope訪問該控制器。 所以在你的指令的控制器功能中：
$scope.datepickerOptions = $scope.appCtl.datepickerOptions
請注意，我在這里選擇了“點”語法，因為否則原型繼承會在指令中為datepickerOptions創建一個新的范圍元素，而不是遍歷和檢查范圍鏈。 通過使用點語法，訪問先前的范圍變量（appCtl），然后子對象查找（datepickerOptions）使應用程序遍歷范圍鏈並獲取對象而不是遮蔽它。
最后要解決的問題是ngModel。 如果您一直在跟蹤，那么您所要做的就是將ng-model（在您的指令模板中）設置為“appCtl.modelName”，其中modelName是您要使用的變量。 現在您的控制器將直接分配給它的變量。 如果要在該值更改時執行某些操作，請將其添加到AppCtrl控制器：
// create a variable so that it can be used in callbacks where "this" changes
var _this = this;
// Create this by hand since its ng-model binding is added dynamically by the directive template
_this.modelName = null;
$scope.$watch(function() { return _this.modelName; }, function(val, oldVal)
{
// do something here, remembering that _this contains a reference to the controller itself
});
另請注意，在執行此操作時，您可以刪除其他輸入（datepickermirror），因為您的所有數據都已存在於控制器中，並且只需通過指令訪問。
希望有所幫助！
如何在指令控制器和父作用域之間同步數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.