Javascript AngularJS:指令和范围
我有一个简单的问题,我认为它有一个非常简单的解决方案,但不知何故我错过了它 我正在为我的应用程序设置一个简单的指令。我将scope属性设置为默认值“false”,因为我希望它共享控制器的作用域 问题是,我似乎无法访问该范围 在我的链接功能中,我可以执行以下操作:Javascript AngularJS:指令和范围,javascript,angularjs-directive,Javascript,Angularjs Directive,我有一个简单的问题,我认为它有一个非常简单的解决方案,但不知何故我错过了它 我正在为我的应用程序设置一个简单的指令。我将scope属性设置为默认值“false”,因为我希望它共享控制器的作用域 问题是,我似乎无法访问该范围 在我的链接功能中,我可以执行以下操作: console.dir(scope) 并且我可以在scope对象中看到我所关注的属性(“pages”) 如果我尝试这样做: console.dir(scope.pages) 但是,它返回为未定义 我错过了什么 提前谢谢 MyDir
console.dir(scope)
并且我可以在scope对象中看到我所关注的属性(“pages”)
如果我尝试这样做:
console.dir(scope.pages)
但是,它返回为未定义
我错过了什么
提前谢谢
MyDirectives.directive("mdPagination", function(){
return {
templateURL: "/templates/pagination.html",
replace: true,
restrict: 'A',
scope: false, //default
link: function(scope, element, attrs){
console.log('in linking function');
console.dir(scope);
console.dir(element);
console.dir(attrs);
console.dir(scope.pages);
}
}
});
模板:
<nav class="pagination" md-Pagination></nav>
尝试将作用域注入到指令中
MyDirectives.directive("mdPagination", function($scope){...
以下是使用Ng 1.2的代码:
mydirections.directive(“mdPagination”,function(){
console.log('BLAH');
返回{
模板:“废话!”,
替换:正确,
限制:“A”,
作用域:false,//默认值
链接:函数(作用域、元素、属性){
console.log('in linking function');
console.dir(范围);
console.dir(元素);
console.dir(attrs);
console.dir(作用域['pages']);
}
}
});
请注意,我正在向控制器中注入$scope 代码中的问题是:
MachineServices.getByCustomerId
和MachineServices.query
是异步的。调用这些函数时,来自服务器的数据尚未到达,这些行
$scope.Machines = data.results;
$scope.pages = data.pages;
尚未调用
链接函数中的作用域绑定到父函数的作用域。但是当调用链接
函数时,父级的scope.pages仍然未定义(由于asyn)
当我们使用角度数据绑定时,我们应该是被动的,只需倾听更改并做出相应的反应(例如使用$watch),因为我们的代码不知道也不应该知道绑定属性何时有值或其值被更新<代码>让angular通知我们更改看起来您正在使用angular$资源为您的机器服务,对吗?这将为您的结果创建一个空对象或数组,您可以立即绑定到该对象或数组,然后在调用异步完成时用结果填充该对象或数组。当angular调用
link
时,它还不会填充数据
首先将日志记录添加到您的查询
和getByCustomerId
调用中,以确保它们正确获取值并设置作用域上的属性。将{{pages | json}}
添加到模板中的某个位置,以便在页面的json发生更改时查看页面的json。如果您看到了这一点,那么您可以在指令中查看该属性,如果您需要在其更改时执行一些特殊操作:
MyDirectives.directive("mdPagination", function(){
return {
templateURL: "/templates/pagination.html",
replace: true,
restrict: 'A',
scope: false, //default
link: function(scope, element, attrs){
console.log('in linking function');
console.dir(scope);
console.dir(element);
console.dir(attrs);
console.dir(scope.pages);
// watch pages for changes
scope.$watch('pages', function(value) {
console.log("pages now has this value:");
console.dir(scope.pages);
});
}
}
});
您能显示一下您使用指令的模板代码吗?以及设置scope.pages值的控制器的名称?是否确定scope.pages是
未定义的
,而不是空对象或数组?当您在控制台中扩展范围以查看pages属性时,它会说什么?我看不出有任何理由它会说一些与输出scope.pages
不同的东西,因此我的答案将假设您实际看到的是一个空对象或数组。在学习之前,我有时会遇到这个问题。我的解决办法是使用ng if
@gustavohenke:我认为我们不应该这样做,当我们使用数据绑定时,我们应该尽可能地被动。
$scope.Machines = data.results;
$scope.pages = data.pages;
MyDirectives.directive("mdPagination", function(){
return {
templateURL: "/templates/pagination.html",
replace: true,
restrict: 'A',
scope: false, //default
link: function(scope, element, attrs){
console.log('in linking function');
console.dir(scope);
console.dir(element);
console.dir(attrs);
console.dir(scope.pages);
// watch pages for changes
scope.$watch('pages', function(value) {
console.log("pages now has this value:");
console.dir(scope.pages);
});
}
}
});