第一次用AngularJS
2024-10-20 15:58:50
1.创建指令的4种方式（ECMA）
var appModule = angular.module('app', []);
appModule.directive('hello', function(){
return {
/**
* E 元素
* C class
* M 注释 directive:hello
* A 属性 默认
*/
restrict: 'ECMA',
template: '<div>hello world.</div>',
replace: true
};
});
2.指令的多种调用方式
<!-- 定义指令，匹配过程(去掉'x-'、'data-'、转化':', ',' , '-', '_-'为驼峰式) --> <my-hello></my-hello>
<div my-hello></div>
<!-- directive:my-hello -->
<div class="my-hello"></div>
<my:hello></my:hello>
<my_hello></my_hello>
<data-my-hello></data-my-hello>
<x-my-hello></x-my-hello>
3.service 与 controller、directive交互
<button add-book-button>Add book</button> <ul ng-controller="books.list">
<li ng-repeat="i in books">书名：{{i.title}}，作者：{{i.author}}</li>
</ul>
var appModule = angular.module('app', []);
// service 单例，共享数据
appModule.service('Book', ['$rootScope', function($root){
var service = {
books: [
{
"title": "书名1",
"author": "作者1"
},
{
"title": "书名2",
"author": "作者2"
}
],
addBook: function(book){
service.books.push(book);
// 给root下所有的books.update派发事件
$root.$broadcast('books.update');
}
};
return service;
}]);
// 在控制器里使用Book服务
appModule.controller('books.list', ['$scope', 'Book', function(scope, Book){
scope.books = Book.books;
scope.$on('books.update', function(){
scope.$apply(function(){
scope.books = Book.books;
});
});
}]);
// 在指令里使用Book服务
appModule.directive('addBookButton', ['Book', function(Book){
return {
restrict: 'A',
link: function(scope, el){
var n = 0;
el.bind('click', function(){
Book.addBook({
"title": "新书"+(++n),
"author": "新作者"+n
});
});
}
};
}]);
4.controller 与 controller交互
<!-- 控制器嵌套 -->
<div ng-controller="Ctrl1Parent">
<p>{{text}}</p>
<button ng-click="changeText()">控制器嵌套Parent</button>
<div ng-controller="Ctrl1Child">
<p>{{text}}</p>
<button ng-click="changeText()">控制器嵌套Child</button>
</div>
</div> <!-- 控制器嵌套，向上传播 -->
<div ng-controller="Ctrl2Parent">
<p>{{text}}</p>
<div ng-controller="Ctrl2Child">
<button ng-click="changeText()">向上传播</button>
</div>
</div> <!-- 控制器嵌套，向下传播 -->
<div ng-controller="Ctrl3Parent">
<button ng-click="changeText()">向下传播</button>
<div ng-controller="Ctrl3Child">
<p>{{text}}</p>
</div>
</div> <!-- 控制器嵌套，兄弟传播 -->
<div ng-controller="Ctrl4Parent">
<div ng-controller="Ctrl4Child">
<p>{{text}}</p>
<button ng-click="changeText()">兄弟传播</button>
</div>
<div ng-controller="Ctrl4Child">
<p>{{text}}</p>
<button ng-click="changeText()">兄弟传播</button>
</div>
</div> <!-- 服务 -->
<div ng-controller="Ctrl5Main">
<input type="text" ng-model="test" />
<div ng-click="add()">add</div>
</div>
<div ng-controller="Ctrl5Side">
<div ng-click="get()">get {{name}}</div>
</div>
var appModule = angular.module('app', []);
// 控制器与控制器交互 -> 控制器嵌套
appModule.controller('Ctrl1Parent', ['$scope', function(scope){
scope.text = 'hello';
scope.changeText = function(){
scope.text = 'parent';
};
}]);
appModule.controller('Ctrl1Child', ['$scope', function(scope){
scope.changeText = function(){
scope.text = 'child';
};
}]);
/**
* $on 绑定事件
* $emit 向上传递事件(冒泡)
* $boardcast 向下传递事件(捕获)
*/
// 控制器与控制器交互 -> 事件传播（控制器嵌套，向上传播）
appModule.controller('Ctrl2Parent', ['$scope', function(scope){
scope.text = 'parent';
scope.$on('changeText', function(ev, text){
scope.text = text;
});
}]);
appModule.controller('Ctrl2Child', ['$scope', function(scope){
scope.changeText = function(){
scope.$emit('changeText', 'child');
};
}]);
// 控制器与控制器交互 -> 事件传播（控制器嵌套，向下传播）
appModule.controller('Ctrl3Parent', ['$scope', function(scope){
scope.text = 'parent';
scope.changeText = function(){
scope.$broadcast('changeText', 'child');
};
}]);
appModule.controller('Ctrl3Child', ['$scope', function(scope){
scope.$on('changeText', function(ev, text){
scope.text = text;
});
}]);
// 控制器与控制器交互 -> 事件传播（同级传播）
appModule.controller('Ctrl4Parent', ['$scope', function(scope){
// 绑定一个changeTextAll事件，它被触发时会向子作用域发布changeTextExe
scope.$on('changeTextAll', function(){
scope.$broadcast('changeTextExe');
});
}]);
appModule.controller('Ctrl4Child', ['$scope', function(scope){
scope.text = 'parent';
// 触发父控制器的changeTextAll事件，得到changeTextExe
scope.changeText = function(){
scope.$emit('changeTextAll');
};
// changeTextExe发生
scope.$on('changeTextExe', function(){
scope.text = 'changeTextExe';
});
}]);
// 以服务的方式交互
appModule.factory('instance', function(){
return {};
});
appModule.controller('Ctrl5Main', function($scope, instance){
$scope.add = function() {
instance.name = $scope.test;
};
});
appModule.controller('Ctrl5Side', function($scope, instance){
$scope.get = function() {
$scope.name = instance.name;
};
});
最新文章
- Windows系统下Oracle每天自动备份
- R语言 推荐算法 recommenderlab包
- 重写OnPaint事件对窗体重绘（显示gif动画） 实例2
- Java对象序列化/反序列化的注意事项
- 第三十 访问财富进退自如 —Spring交易管理
- IOS学习之路二十四（custom 漂亮的UIColor）
- How to untar a TAR file using Apache Commons
- layer使用总结
- with open为什么会自动关闭文件流
- 使用bootstrap-select有时显示“Nothing selected”
- 通用的ProtostuffSerializer for Java
- PHP利用GD库处理图片方法实现
- mysql的导入导出工具mysqldump命令详解
- SpringBoot系列五：SpringBoot错误处理（数据验证、处理错误页、全局异常）
- 在Unity3d中调用外部程序及批处理文件
- python中，数字类型计算
- python爬虫（5）--正则表达式
- 【GDOI2015】 水题 tarjan缩点
- 【链表】Odd Even Linked List
- shell脚本程序中循环、判断语句的介绍