AngularJS notes -- from 《AngularJS权威教程》（3）

最新推荐文章于 2020-04-04 11:22:35 发布

转载最新推荐文章于 2020-04-04 11:22:35 发布 · 489 阅读

angularJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了AngularJS中的指令概念及其实现方式，包括自定义指令的各个配置选项及其用途。此外，还详细讲解了如何利用AngularJS的路由功能实现页面间的切换与内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. ng-change 这个指令会在表单输入发生变化时计算给定表达式的值。

2. ng-class="{red: x > 5}" 当表达式为TRUE时，引用red 类

3. 对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

4. 指令可能的键值：

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String,  // E\A\C\M
priority: Number,  // 优先级，默认0，相同时，声明在前的指令优先执行
terminal: Boolean,  //停止运行当前元素上比本指令优先级低的指令
template: String or Template Function:  //1.HTML文本；2.一个可以接受两个参数的函数。更好地选择是使用templateUrl
function(tElement, tAttrs) (...},
templateUrl: String,  //1.外部HTML文件路径；2.一个函数返回外部HTML文件路径。3.会异步获取HTML模板；
replace: Boolean or String,//默认false；会不会替换使用该指令的元素；
scope: Boolean or Object, //默认false，可以被设置为true或对象；如果要创建一个能够从外部原型继承作用域的指令，将 scope 属性设置为 true；

//创建具有隔离作用域的指令需要将 scope 属性设置为一个空对象 {} 。如果这样做了，指令的模板就无法访问外部作用域；

//数据绑定策略：@（or @attr）使用 @ 符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量

//= (or =attr) 通过 = 可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变

//& (or &attr) 通过 & 符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数<span style="color:#ff0000;"> ？？？？？？</span>
transclude: Boolean, <span style="color:#ff0000;">？？？？</span>
controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});

5. 指令的controller和link：指令的控制器和 link 函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用。

6. 就是将包含模板的指令和添加行为的指令分离开来。如果一个元素已经有一个含有模板的指令了，永远不要对其用另一个指令进行修饰。

7. ng-view 是由 ngRoute 模块提供的一个特殊指令，它的独特作用是在HTML中给 $route 对应的视图内容占位。

8. 路由

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',  //渲染HTML模板路径
controller: 'HomeController'   //会与路由新创建的作用域相关联
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {    //列表中的元素会被注入到控制器中
user: function(SessionService) {
return SessionService.getCurrentUser();
}
}
})
.otherwise({
redirectTo: '/'   //重定向
});
}]);

9. $watch会监听变量的变化，$digest会循环遍历$watch查看DOM是否需要更新；angular context事件都会触发$digest循环检查$watch值。

10. 使用第三方库并且想让事件运行在Angular上下文内部时，就必须使用 $apply() 。

11.