Angular 通过指令操作DOM

最新推荐文章于 2024-09-24 11:22:03 发布

码农买田

最新推荐文章于 2024-09-24 11:22:03 发布

阅读量717

点赞数

分类专栏： AngularJS 文章标签： angularjs html js

本文链接：https://blog.csdn.net/Tonyyanyantao/article/details/42192865

版权

AngularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

angular是不鼓励自己操作DOM的，但是你想，也可以。官方建议通过指令操作，可以通过自带的指令，当然最强大的是可以自己定义指令。

对于services, 我们可以通过module 对象的 API directive() 函数来定义指令：

var appModule = angular. module(' appModule' , [ . . . ] );
appModule. directive(' directiveNam e' , directiveFunction);

directiveFunction应该是一个工厂函数，不过太复杂了，我们来个简单的：

比如我们想让一个链接元素获得焦点，我们可以这么写：

var appModule = angular. module(' app' , [ ] );
appModule. directive(' ngbkFocus' , function() {
return {
link: function(scope, element , attrs, controller) {
element [0] . focus();
}
};
});

这里我们定义了link函数然后作为指令的配置对象返回。在link函数里，我们将元素聚焦。

模板中这样使用：

index.html
<html lang='en' ng-app='app' >
<body ng-controller="SomeController">
<button ng-click="clickUnfocused()">
Not focused
</ button>
<button ngbk-focus ng-click="clickFocused()">
I ' m very focused!
</ button>
<div>{{message. text }}</ di v>
</ body>
</ html >

controllers .js
function SomeController($scope) {
$scope. message = { text : ' nothing clicked yet ' };
$scope. clickUnfocused = function() {
$scope. message. text = ' unfocused button clicked' ;
};
$scope. clickFocused = function {
$scope. message. text = ' focus button clicked' ;
}
}
var appModule = angular. modul e(' app' , [ ' di rect i ves' ] );

这样，当页面加载时，用户会看到标记"I’m very focused!"按钮获得焦点高亮。