AngularJS 如何从指令访问控制器范围
AngularJS How to access Controller scope from Directive
我正在尝试从指令函数访问父控制器范围。当我尝试获取 $scope.$parent
的值时,它 return 就是我的对象。但是,当我尝试从该对象访问任何变量时,它 returns Undefined.
app.controller('myCtrl', function ($scope, $http, $timeout) {
$scope.init = function(){
$http.get('url.php').success(function(data){
$scope.assignmentInfo = data.record;
});
};
});
app.directive('getInfo', [function(){
return {
restrict: 'A',
scope:{
data:'=',
title: '='
},
link:function(scope, elem, attrs){
scope.$watch('data.visible', function(val){
// do something
});
},
controller: function($scope) {
console.log($scope.$parent); // return an object
console.log($scope.$parent.assignmentInfo); // return undefined
},
templateUrl: 'template.html'
};
}]);
首先console.log($scope.$parent)
return输出如下:
但是$scope.$parent.assignmentInfo
returnunderfined
如何访问 assignmentInfo
?
事实上,你尝试打印 assignmentInfo
时它还没有分配,所以你应该 $watch
为它:
angular.module('app', [])
.controller('ctrl', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
$scope.assignmentInfo = 'some data';
}, 1000)
}])
.directive('myDirective', function() {
return {
scope: {},
template: '<div>from directive: {{assignmentInfo}}</div>',
controller: function($scope) {
$scope.$watch(function() {
return $scope.$parent.assignmentInfo;
}, function(value) {
if (value){
console.log(value);
$scope.assignmentInfo = value;
}
})
}
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<my-directive></my-directive>
</div>
我正在尝试从指令函数访问父控制器范围。当我尝试获取 $scope.$parent
的值时,它 return 就是我的对象。但是,当我尝试从该对象访问任何变量时,它 returns Undefined.
app.controller('myCtrl', function ($scope, $http, $timeout) {
$scope.init = function(){
$http.get('url.php').success(function(data){
$scope.assignmentInfo = data.record;
});
};
});
app.directive('getInfo', [function(){
return {
restrict: 'A',
scope:{
data:'=',
title: '='
},
link:function(scope, elem, attrs){
scope.$watch('data.visible', function(val){
// do something
});
},
controller: function($scope) {
console.log($scope.$parent); // return an object
console.log($scope.$parent.assignmentInfo); // return undefined
},
templateUrl: 'template.html'
};
}]);
首先console.log($scope.$parent)
return输出如下:
但是$scope.$parent.assignmentInfo
returnunderfined
如何访问 assignmentInfo
?
事实上,你尝试打印 assignmentInfo
时它还没有分配,所以你应该 $watch
为它:
angular.module('app', [])
.controller('ctrl', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
$scope.assignmentInfo = 'some data';
}, 1000)
}])
.directive('myDirective', function() {
return {
scope: {},
template: '<div>from directive: {{assignmentInfo}}</div>',
controller: function($scope) {
$scope.$watch(function() {
return $scope.$parent.assignmentInfo;
}, function(value) {
if (value){
console.log(value);
$scope.assignmentInfo = value;
}
})
}
}
})
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<my-directive></my-directive>
</div>