[英]How can I access attribute of controller in directive from calling controller
I'm quite new to Angular, but am attempting to access an attribute called hour from a directive's controller inside another controller (the parent wrapping controller of the directive). 我是Angular的新手,但是我试图从另一个控制器(该指令的父包装控制器)内部的指令控制器访问名为hour的属性。
Here is how I setup the directive and its controller: 这是我设置指令及其控制器的方式:
(function () {
angular.module("datePicker", [])
.directive("datePicker", function () {
return {
restrict: "E",
scope: {
ctrl: '=ctrl'
},
templateUrl: "app/views/datepicker.html"
};
})
.controller('datePickerController', function ($scope) {
this.min = "";
this.hour = "";
this.minutes = [];
this.hours = [];
let i = 0;
for (i; i < 60; i++) {
let time = "";
if (i <= 9) {
time = "0" + i;
} else time = i;
this.minutes.push(time);
if (time <= 23) {
this.hours.push(time);
}
}
$scope.somechange = function (v) {
alert(v);
$scope.hour = v;
$scope.$parent.printFrom = "It changed";
}
});
})();
This is the implementation of the directive: 这是指令的实现:
<div ng-controller="datePickerController as ctrl">
<md-input-container>
<label>Hour</label>
<md-select ng-change="somechange(ctrl.hour)" ng-model="ctrl.hour">
<md-option ng-repeat="hour in ctrl.hours" ng-value="hour">
{{ hour }}
</md-option>
</md-select>
</md-input-container>
</div>
And how it's being called from the 'parent': 以及如何从“父母”那里调用它:
<div>
<date-picker ctrl="from"></date-picker> {{ from.today | date:'short' | split:' ':0}}, {{ $scope.hour }}
</div>
As you can see I am attempting to access the hour attribute from the datepicker's scope, but I'm unable to access it (or at least it's not updating). 如您所见,我试图从datepicker的范围访问小时属性,但是我无法访问它(或者至少它没有更新)。
I can see it fine in the alert
that gets called in its ng-change
event, but I can't seem to find it on the parent's scope... 我可以在其
ng-change
事件中调用的alert
中很好地看到它,但是我似乎在父级的作用域中找不到它...
You have to add attribute hour on parent object. 您必须在父对象上添加属性小时。
Code for controller and directive: 控制器和指令的代码:
var app = angular.module('datepicker', []);
app.controller('ParentController', function($scope) {
$scope.parent = {};
});
app.directive('datePicker', function () {
return {
restrict: 'E',
scope: {
parent: '='
},
templateUrl: 'app/views/datepicker.html'
};
})
.controller('datePickerController', function ($scope) {
this.min = '';
this.hour = '';
this.minutes = [];
this.hours = [];
let i = 0;
for (i; i < 60; i++) {
let time = '';
if (i <= 9) {
time = '0' + i;
} else time = i;
this.minutes.push(time);
if (time <= 23) {
this.hours.push(time);
}
}
$scope.somechange = function (v) {
alert(v);
$scope.parent.hour = v;
$scope.$parent.printFrom = 'It changed';
}
});
Create directive as html element: 创建指令作为html元素:
<date-picker parent="parent"></date-picker>
<p>{{parent.hour}}</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.