js框架——angular.js(2)

1. 模块的利用扩充

模块的名称也可以当做变量使用,例如:

 <body ng-app>
<label><input type="checkbox" ng-model="checked"/>Toggle Button</label>
<button ng-disabled="checked">Press me</button>
</body>

2. directive指令机制

指令的作用:实现语义化标签

在首页上我们可以随便定义标签使用,这一段标签里可以书写内容也可以不写。后台js可以使用方法替换这段内容,替换的可以是一大段html代码,甚至可以是一个完整的页面:

<body ng-app="MyApp">
<my>
</my>
</body>
 var app = angular.module("MyApp", []);

 app.directive("myWidgetFirst", function() {
var linkFunction_nice = function(scope, element, attributes) {
var paragraph = element.children()[0];
//ag内部实现的一个选择器操作
$(paragraph).on("click", function() {
$(this).css({ "background-color": "red" });
});
}; return {
restrict: "E", //暴露的一个元素,若是‘A’则是属性
replace: true,
templateUrl: 'js/template/test_index.html'
};
});

上面一个就是替换标签<myWidgetFirst>的。

返回的内容在return当中,第一个restrict后面返回的参数有4中,

E,element代表元素 A代表属性,C代表样式css,M代表注释。

replace:true是否替换,flase就不会替换

templateUrl:替换的网页,如果想要替换其他东西,如html代码,可以这么写:

template:"<div>aaa</div>"

directive指令机制的原理是自定义一个属性或者标签来使用,因为一般来说angular自带的标签不是很够用,所以需要额外的根据需要去定义。如果定义的是标签,如

<apple></apple>

那么,这个标签返回内容return中的restirct的值便是E,如果定义的是属性,如:

<p apple="appletree" yahaha="yohoho"></p>

那么返回值里面的return中的restrict的值就是A。

总结一下,directive的return中应该有多少东西——

 var phonecatDirectives = angular.module('phonecatDirectives', []);  

 phonecatDirectives.directive('directiveName', function($inject) {  

    return {
  template: '<div></div>',   replace: false,   transclude: true,   restrict: 'E',   scope: { ... }, controller: function($scope, $element){ .... },   compile: function(tElement, tAttrs, transclude) {
    return {
      pre: function preLink(scope, iElement, iAttrs, controller) { ... },
      post: function postLink(scope, iElement, iAttrs, controller) { ... }
    }
  },   link: function(scope, iElement, iAttrs) { ... }
};
})

完整来讲,应该有这么多。但是我们并不是都要使用,选择需要的就可以。现在对所有的属性进行翻译-

template:模板,即替换内容,如果replace 为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。

transculde:编译转换,一般模板中会出现带有ng-transclude属性的标签,这个值设为true的时候会启动编译,将里面的代码经过编译后输出:

 app.directive("secondWidget", function(){
return {
restrict: "E",
transclude: true,
scope: {
title: '@title'
},
template: "<div ng-transclude>{{title}}</div>"
};
})

如这个,div中出现ng-transclude属性,后面的是{{title}}。

如果没有这个属性,那么这个secondWidget标签的内容会被模板替代,如果有这个属性,那么模板内容会将标签内容包裹起来放到里面。于是,上面的结果就是;

 <second-widget title="aaa" class="ng-isolate-scope ng-scope"><div ng-transclude="" class="ng-binding">aaa
<p class="ng-scope">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, fugit, voluptate ad voluptas ullam sunt vitae eligendi asperiores consequuntur ex sequi quisquam rem animi ut modi unde neque optio in!</p>
</div></second-widget>

scope:定义,这是一个对象,对象里面有着各种各样定义的东西,如:

scope: {
title: '@title'
},

template: "<div ng-transclude>{{title}}</div>"

这里的title对应着下面的模板的title,而后面的字符串"@title"代表标签上title属性值,@代表单向绑定。

只写一个@其实也可以,但是属性值的名字就必须是变量的名字,如果属性名称发生改变就不行了。例如——

title: '@'

<div titlea="aaa"></div>

这种情况下就不行了,只有

<div title="aaa"></div>

才能使用。

有@,其实也有其他的符号,单向绑定@,双向绑定的=,还有函数专用的 &

但双向绑定没什么好讲的,关于函数必须讲一下:

 

app.directive("myWidgetExpr", function() {
var linkFunction = function(scope, element, attributes) {
scope.text = scope.fna({ count: 5 });
};

return {
restrict: "E",
template: "<p>{{text}}</p>",
link: linkFunction,
scope: {
fna: "&fn"
}
};

  <my-widget-expr fn="count = count + 1"></my-widget-expr>

这个代码中,得到的结果是6.

标签中函数可以写一些简单的表达式,如上面的

"count = count + 1"

表达式写在引号当中,这个表达式可以有多个参数,但是每个参数都需要在后台声明,所有的参数都写在一个对象中:

scope.text = scope.fna({ count: 5 ,max:5});

你可以随便定义多个其他值不用,但不能让函数被调用的时候缺乏这个参数,做到宁滥勿缺。

这个对象中也可以写函数——

scope.text = scope.fna({ count: 5 ,max:function(count){
return count*2
}});

<my-widget-expr fn="max(2) "></my-widget-expr>

调用起来意外地好用。但是不知道为什么不能使用同一个对象的属性,如:

 app.directive("myWidgetExpr", function() {
var linkFunction = function(scope, element, attributes) {
scope.ab={
a: 5 ,
// c:a,
b:function(){ alert(this.a)
}
}
scope.text = scope.fna(scope.ab);
// console.log(scope.ab.b())
console.log( scope.fna(scope.ab))
};

不知道为什么就是出错

3. 循环

如果我们需要给一个循环里面的元素添加组件,如给10个li添加单击事件,等重复编译一个组件内容的时候,我们需要在return中添加行为:

  <body ng-app="MyApp">
<repeat-ntimes repeat="10">
<h1>Header 1</h1>
<p>This is the paragraph.</p>
</repeat-n-times> var app = angular.module("MyApp", []); app.directive("repeatNtimes", function() { return {
restrict: "E", compile: function(tElement, attrs) {
var content = tElement.children();
for (var i=1; i<attrs.repeat; i++) {
tElement.append(content.clone());
}
//当你在重复编译一个组件内容的时候,你需要在里return一个行为。
return function (scope, element, attrs) {
element.on("click", "h1", function() {
$(this).css({ "background-color": "red" });
});
};
}
};
});

4. require 模块引用

当我们需要在一个一个中加载其他控制器的属性或者变量的时候,就可以用require。

 var app = angular.module("MyApp", []);

 app.directive("basket", function() {
return {
restrict: "E",
controller: function($scope, $element, $attrs) {
$scope.content = []; this.addApple = function() {
$scope.content.push("apple");
}; this.addOrange = function() {
$scope.content.push("orange");
};
},
link: function(scope, element) {
element.bind("mouseenter", function() {
console.log(scope.content);
});
}
};
}); app.directive("apple", function() {
return {
require: "basket",
link: function(scope, element, attrs, basketCtrl) {
basketCtrl.addApple();
}
};
}); app.directive("orange", function() {
return {
require: "basket",
link: function(scope, element, attrs, basketCtrlaa) {
basketCtrlaa.addOrange();
}
};
});

可以看到上面代码中的require连接的就是basket控制器,这个控制器也是第一段代码声明的。这里请注意link函数的第四个参数basketCtrl,这个参数代表的是引用的控制器,可以看到名字可以随便起但是最好遵循XXctrl这种起名方式。

上一篇:js框架——angular.js(3)


下一篇:spring 5.1.2 mvc HanderMapping源码