angular笔记

来源：互联网发布：谷歌输入法for linux 编辑：程序博客网时间：2024/06/06 01:18

1.ng-app 声明angular作用范围

2.ng-controller声明controller作用范围

3.ng-model 双向数据绑定

4.ng-bind=={{}}插值，单向数据输出

5.ng-class 一般不会运用变量{{}}方法改变，而是运用字符串数组ng-class="{true: 'active', false: 'inactive'}[isActive]" 或者复杂类名的键值对方式ng-class={'selected': isSelected, 'car': isCar}"

6.ng-click ng-change ng-repeat

ng-app，可以实现模块的自动加载。angular.bootstrap(div,['service'])实现手动加载

angular.module

var serviceModuel = angular.module('serviceName',['ngRoute'],['ngAnimate']);//为ng-app='serviceName'创建模块，ngRoute，ngAnimate是依赖模块注入口。

serviceModuel.controller('textController',function($scope,$routeParams,$rootScope){})//定义模块的控制器,$scope,$routeParams,$rootScope是依赖服务注入口

angular.controller

控制器不应该做太多工作，保持职责单一的做法是将不属于控制器的工作抽离到服务中，通过依赖注入到控制器中使用这些服务。

控制器之间通信方式：

1，作用域继承

当作用域上面的值为基本类型的时候，修改父作用域上面的值会影响到子作用域，反之，修改子作用域只会影响子作用域的值，不会影响父作用域上面的值；

如果需要父作用域与子作用域共享一个值的话，就需要用到后面一种，即作用域上的值为对象，任何一方的修改都能影响另一方，这是因为在js中对象都是引用类型。

2，$on $emit $boardcast。$on表示事件监听 $emit表示向父级作用域触发事件 $boardcast表示向子级作用域广播事件。

3，如果两个平级（兄弟）控制器之间共享数据，需在父元素中定义共享对象，有一方改变对象，则另一方自动改变

directive指令的作用是把我们自定义的语义化标签替换成浏览器识别的html标签

//html

<body>

<hello>

<span>原始的内容</span>

</hello>

</body>

// js：

appModule.directive('hello', function(){

return {

restrict: 'E',

template: '<div>Hi，there</div>',

replace: true

//生成html

<body>

<div>

Hi there

</div>//replace使template代替hello标签

</body>

//如果不是replace 而是transclude: true则

//js

如下 html不变appModule.directive('hello', function() {

return {

restrict: 'E',

template: '<div>Hi，there<spanng-transclude></span></div>',

transclude: true};

scope：true;}

//生成html

<body>

<hello>

<div>

Hi，there

<spanng-transclude="><span>原始的内容</span></span>

</div>

</hello>

</body>

restrict

scope:

scope：false 此时，directive没有独立的scope对象，link函数中引用的scope对象来自于当前节点的默认controller
scope：true 此时，directive拥有独立的scope对象，此scope是由父scope对象继承而来，可以访问父scope中的所有属性，此时实际上是通过继承链接（prototype链）访问的父scope中的属性，要注意的是，当给此scope继承而来的属性名称赋值的时候，子scope中会相应建立一个本地属性，此时改变的是本scope的变量属性，父scope中的属性是不会改变的
scope：{propertyName:"=@propertyValue"} 此时，directive中拥有一隔离的scope对象，其实就是一个全新的scope对象，和上面取值为true时的区别就是不能访问父scope中的属性，当然还是可以通过$parent属性去访问父scope对象中属性的。
当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域，现在，我们来看看绑定策略的三种形式：& 、= 、@。
@，它将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的），什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来
js:
direct参数中：
scope:{
name:'@forName'
}
html
<div ng-controller="nameController">
<direct for-name="{{ Name }}"></direct>
<div>
上面两个就等于 name={{Name}}
=最常用，是可以进行双向绑定的关键。@是针对字符串而用，但=是针对某个对象的引用
&符号。它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数

transclude: true 指令的内部可以访问外部指令的作用域,并且模板也可以访问外部的作用域对象。为了将作用域传递进去,scope参数的值必须通过{}或true设置成隔离作用域。如果没有设置scope参数,那么指令内部的作用域将被设置为传入模板的作用域.

link属性仅仅是在compile属性没有定义的情况下使用,link和compile不兼容。

angular $compile

0 0