写在前面:
之前的一年里都在用vue开发,现在开始使用angular.js,(注:受框架影响,现在学的是v1.x)又开始了漫长的学习之路。
不过不得不提的是:vue的文档比angular.js要友好太多太多。基本上读完vue的文档就可以上手开发了。但是angular的教程缺乏系统性,感觉不够友好。可能是纯英文的原因吧。。。
这里也只是先把工作中接触到的知识点或踩坑做些记录。
上面代码表示:orderBy后面可以跟一个数组,按优先级从前往后进行排序。数组里可以是string( name:正序,id倒序),函数(orderVersions)。当然简单情况下,可以只跟一个 string或一个fn
上面的代码表示:在ttt.html中初始化了dataModal和orderType两个变量。且他们的初始值分别是:‘doneIssues’和pane.selfOrderType的值。
通过字面量init可能会误认为orderType经初始化后不会动态改变了。错!ng-init 也是挂载到$scope上的。而且后面也是可以改变的。
例子为证:
![]()
angular.js官网上有提醒开发者慎用该指令来声明变量。因为会添加一些不必要的逻辑到 scope 中,建议可以在控制器中声明变量 。
angular.module('myModule',[]).directive('myDirective',function(){
return {
restrict: 'ECMA'//指令的调用方式,可以是任意值的
组合或任一值 ,常用E和A
// E:元素
// C:class
// M: 备注
// A: 属性
priority: Number //当在一个Dom上使用多个指令时,
按优先级生效。不常用。
replace:Boolean //指令模板是否替换原有dom,
//注意:如果设为true,模板必须只有一个根节点,不然报
错。
template:function/string
templateUrl:模板url
scope:true/false/Object //为指令创建作用域
//true:一开始绑定父作用域的变
量,但修改子作用域后,会创建并继承
父作用域的变量,变成独立的作用域。
不会影响父作用域。
//false:默认值,直接使用父作用域的变量。改变父作用
域的变量会影响指令内该变量的值,反之亦然。
//对象:{
test1:'&', //和父作用域的函数建立联系
test2:'@', //单向绑定,父作用域可以改变子
作用域的,反之不可。
test3:'=' //父子作用域互相影响。
}
controller:function($scope){},
link:function($scope){}
}
})
参考链接点此
- 实例1: scope:false (默认,共用父作用域变量)
"main" >
"text" ng-model="name" />
//注:这里,上面的input框值改变,下面就变。下面变,上面也会变。
var m1 = angular.module('myApp',[]);
m1.directive("hello",function(){
return {
restrict:"ACEM",
template:"scope测试:
",
scope:false
}
}
m1.controller('main', ['$scope', function($scope){
$scope.name = "main-title";
}])
- 实例2:scope 为true
"main" >
"text" ng-model="name" />
var m1 = angular.module('myApp',[]);
m1.directive("hello",function(){
return {
restrict:"ACEM",
template:"scope测试:",
scope:true
}
})
m1.controller('main', ['$scope', function($scope){
$scope.name = "main-title";
}])
//
- 实例3 scope是对象,且变量绑定方式为’@’和‘&’
"other" >
"text" ng-model="name" />
"{{name}}" test="clickFn()">
// 注:@是单向绑定,父作用域的变量值改变会影响子作用域,反之不可。
&是绑定函数。这里必须在调用指令的时候为指令的变量赋值。
m1.directive('hello1',function(){
return {
restrict:"AE",
scope:{
name:'@',
test:'&'
},
template:"
scope测试1:",
}
})
m1.controller('other', ['$scope', function($scope){
$scope.name = "other-title";
$scope.clickFn = function(){
alert('ddd&')
}
}])
- 实例4 scope是对象,绑定为‘=’
"settting" >
"text" ng-model="name"/>
"name">
//双向绑定。父子作用域互相影响。同样必须在调用的时候赋值。不然报undefined
m1.directive('hello2', function () {
return {
restrict: "AE",
scope: {
name:'='
},
template: "scope测试2:
",
controller: function ($scope) {
$scope.name = "Angular2"
}
}
})
m1.controller('settting', ['$scope', function($scope){
$scope.name = "settting-title";
}])
实例3和4中,如果不给指令的变量赋值会报的错误参考:
点击查看