AngularJS观察指令属性表达式,动态继承作用域
AngularJS observe directive attribute expressions, inherit scope dynamically
我的代码很简单:
.controller('Ctrl', ['$scope', '$timeout', function ($scope, $timeout) {
$timeout(function () {
$scope.x = 5;
}, 2000);
}])
.directive('ngHey', ['$parse', function ($parse) {
return {
'restrict': 'A',
'scope': true,
'link': function($scope, el, atr) {
var go = function () {
if ($parse(atr.ngHey)()) {
alert('oiiiiiii');
}
};
atr.$observe('ngHey', function (val) {
if (val) {
go();
}
});
}
};
}]);
//view.html
<div ng-controller="Ctrl">
<span ng-hey="x > 3"></span>
</div>
我希望能够在指令表达式更改时以及当它是真是假时触发,但目前警报从未发生。。。
只有当我做一些类似的事情时,它才有效:
<div ng-controller="Ctrl">
<span ng-hey="{{x > 3}}"></span>
</div>
这不是我想要的,我希望指令执行ng if或ng hide等的表达式…
感谢任何提示或帮助,感谢
在这种情况下不能使用$observe
,因为它是Observes an interpolated attribute.
(文档)。在这种情况下,您可以在如下范围内使用$watch
:
.directive('ngHey', ['$parse',
function($parse) {
return {
scope: true,
link: function($scope, el, atr) {
var go = function(value) {
if (value) {
alert('oiiiiiii');
}
};
$scope.$watch(atr.ngHey, function(val) {
if (val) {
go(val);
}
});
}
};
}
]);
演示:http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview
UPD根据OP的评论,更新后的指令看起来像:
.directive('ngHey', ['$parse',
function($parse) {
return {
scope:{ngHey: '='},
link: function($scope, el, atr) {
var go = function(value) {
if ($scope.ngHey) {
alert('oiiiiiii');
}
};
$scope.$watch('ngHey', function(val) {
if (val) {
go();
}
});
}
};
}
]);
注意,在这种情况下如何使用$scope.ngHey
,不需要$eval
属性。
演示:http://plnkr.co/edit/XakjA2I7lpJdo9YAZFEH?p=preview
JSFIDDLE演示
由于$timeout
稍后将设置x的值,因此检查属性的指令中的条件始终返回false
。因此,每当x
发生变化时,使用$watch
检查go()
中的条件。
var myApp = angular.module('myApp',[]);
myApp.directive('ngHey', function () {
return {
'restrict': 'A',
'scope': true,
'link': function($scope, el, attr) {
var go = function () {
if ($scope.$eval(attr.ngHey)) {
alert('oiiiiiii');
}
};
$scope.$watch('x', function (val) {
if (val) {
go();
}
});
}
};
});
代替$parse
使用$scope.$eval
,并且同样地代替$observe
使用$watch
。
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 动态分配GA增强型电子商务跟踪器
- onkeyup无法动态创建多个文本区域
- 使用javascript将动态表从一个html页面打印到另一个html页
- 如何使Javascript动态html表及其上的事件
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 如何使用javascript从主svg对象动态创建svg视图框
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 通过在Dojo mobile ViewController.openExternalView中动态更改打开同一外部视图的
- 如何在Google柱状图中动态添加行/列
- 困在逻辑中试图定位动态的东西
- 在动态创建的元素上获取对特定选择器的引用
- 如何动态插入jquery代码
- 使用Google Visualization动态调用构造函数
- AngularJS观察指令属性表达式,动态继承作用域
- 创建从单个模板继承的多个动态视图
- 动态委托继承
- 在JavaScript中从类的实例动态继承