Angular基础入门---自定义指令(组件)

Angular1.x版本中并没有提出组件的概念,但是其自定义指令系统可以实现组件的概念。组件之间的通信则可以相应转换为controller之间的通信或者作用域问题。

自定义指令需要经过compile(编译)和link(链接)两个过程。

说明

  1. Angular基础入门系列文章一共6篇,主要是为了github上“course-angular”仓库的一个说明性的小文章。
  2. 随着Vue、React的逐渐流行开来,Angular也发布了第二版,Angular1.x版使用开始减少,但是有时可能会遇到一些Angular1.x的一些问题,另外前端技术发展太快,技术一段时间不使用,就可能遗忘,这个小系列文章和github上的course-angular也是为了日后回头看看Angular相关基础之用。

Angular基础入门

  1. Angular基础入门–数据绑定和指令
  2. Angular基础入门—过滤器
  3. Angular基础入门—作用域和通信
  4. Angular基础入门—ng-Route
  5. Angular基础入门—ui-Router
  6. Angular基础入门—自定义指令(组件)

以下每个实例的公共的util工具类
common.util.js

1
2
3
4
5
6
module.exports = {
render: function(str){
var body = document.querySelector('body');
body.innerHTML = str + body.innerHTML;
}
}

使用

demo15.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var demoTpl = require('../tpls/demo15.string');
var commonUtil = require('../utils/common.util.js');
commonUtil.render(demoTpl);
var myApp = angular.module('myApp', []);
myApp.controller('parentCtrl', function($scope){
$scope.message = "aaaa";
$scope.message2 = "parent message2";
$scope.changeValue = function(){
$scope.message2 = 'aaaaaaaa';
}
});
//directive方法回调函数返回对象属性
// restrict: 'ECMA' E: 指令标签 C:class指令 M:注释指令 A:属性指令
// replace: true 使用模板替换元标记
// controller 当前指令上的controller
// template 当前路由的模板
// templateUrl 当前路由的模板路径
// scope true 默认为false,继承父作用域;true为独立作用域。
// link 表示当directive被angular编译后,执行该方法。link三个参数
// scope:表示当前controller下的数据
// element: 当前DOM
// attr:当前DOM的自定义属性
myApp.directive('helloWorld', function(){
return {
restrict: 'EA',
templateUrl: '/src/scripts/tpls/directiveTpl.html',
replace: true,
scope: {
message2: "="
},
controller: function($scope){
$scope.message = "zzzz";
// $scope.message2 = 'bbbb';
$scope.changeValue = function() {
$scope.message2 = 'bbbbbbbbb';
}
},
compile: function(elem, attrs) {
return function(scope, elem, attrs) {
// console.log(scope.message);
elem.on('click', function() {
console.log(0);
});
// console.log(attrs.scrollX);
}
}
}
});

demo15.string

1
2
3
4
5
6
<div class="demo15" ng-controller="parentCtrl">
<!-- <hello-world url="http://www.baidu.com" scroll-x="true"></hello-world> -->
<hello-world message2="message2"></hello-world>
<div>parent:{{message2}}</div>
<button ng-click="changeValue()">parent changeValue</button>
</div>

测试功能而已,你非要赏点我就没办法了...