angular学习笔记(四)

学习整理:1.angular.module()只有一个参数时表示引用那个模块,通常是有两个参数,一是模块名,二是依赖项

2.过滤器的两种写法:
一:$scope.name = $filter('lowercase')('Ari'); 表示转化为小写
二:{{ name | uppercase }}  表示转化为大写

3.表单属性
①$pristine   未修改表单,未修改时为true
②$dirty      修改过表单,只要修改过则为true
③$valid      合法表单,合法时为true
④$invalid    不合法表单,不合法时为true
⑤$error      判断表单是否合法,不合法则为true,且这个属性可以访问到其他全部属性合法信息
⑥$submitted  判断是否点击提交按钮
⑦$isEmpty    判断是否为空

3.指令(一般用A,属性方式写法)
①指令名应用驼峰命名
②函数应该返回一个对象{}
③使用replace可以把自定义标签名去掉

4.controller
子可以访问父的变量,简而言之就是,底层可以往上查找变量

5.向指令传递数据
angular.module(‘myapp’,[])
.directive('mydirective', function() {
return {
restrict: 'A',
replace: true,
template: '<a href="http://baidu.com">click me</a>'
}
});

改写:
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'

html:
<div my-directive
my-url="http://baidu.com"
my-link-text="click me">
</div>

6.双向数据绑定例子
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="./angular/angular.js"></script>
</head>
<body>

  <label>Their URL field:</label>
  <input type="text" ng-model="theirUrl">
  <div my-directive
       some-attr="theirUrl"
       my-link-text="Click me to go to Google"></div>

  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        replace: true,
        scope: {
          myUrl: '=someAttr',
          myLinkText: '@'
        },
        template: '\
          <div>\
            <label>My Url Field:</label>\
            <input type="text" ng-model="myUrl" />\
            <a href="{{myUrl}}">{{myLinkText}}</a>\
          </div>\
        '
      }
    })
  </script>

</body>
</html>


7.属性指令:
类布尔属性:
ng-href         使用动态URL时,也要配合ng-href使用
ng-src          同上
ng-disabled
ng-checked
ng-readonly
ng-selected与ng-options一起使用
ng-class
ng-style

布尔属性:
ng-disabled
ng-readonly
ng-checked
ng-selected


8.当变量是字符串、数字、布尔型变量时,子控制器是复制父控制器的变量值,不是引用。相反,当为数组、对象、函数的向上引用时,为引用复制,此时相关联。


9.补充指令:
ng-app
ng-init          设置初始状态
ng-controller
ng-include
ng-switch
ng-view
ng-if     真正意义上的移除,恢复时会以初始状态显示(ng-show是隐藏)

10.ng-repeat作用域拥有的特殊属性:
$index   下标0到length-1
$first    第一个元素时为true
$middle   处于中间时为true
$last     最后时为true
$even     index为偶数时为true
$odd      index为奇数时为true

11.ng-bind与{{}}类似,ng-bind不会导致未渲染内容闪烁,{{}}与ng-cloak一起使用也能达到效果

12.ng-model建议绑定scope上对象模型内的属性,而不是直接绑定属性

13.directive返回对象中的属性:
restrict: string,
priority: number,
terminal: boolean,
template: string or template function,
templateUrl: string,
replace: boolean or object,
scope: boolean or object,      重要:true时,会从父作用域继承并创建一个新的作用域
transclude: boolean,
controller: string or function,
controllerAs: string,
require: string,
link: function,
compile: function(){ return {} }

14.terminal(布尔型)
作用:限制比此指令优先级低的指令的执行

15.指令内scope为{}时,不能访问外部变量

猜你喜欢

转载自blog.csdn.net/qq_36414265/article/details/80696615
今日推荐