Angular Js总结(一)

  1. 创建自定义指令

使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective",function() {
    return {
       template : "<h1>
自定义指令!</h1>"
    };
});
</script>
</body>

调用方式:元素名、属性、类名、注释

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!-- 指令: runoob-directive -->

限制使用:只限元素名使用  A 只限属性使用  C 只限类名使用  M只限注释使用

例如

restrict : "A",
template : 
"<h1>自定义指令!</h1>"






2.    ng-model 指令的4种状态:invalid, dirty, touched, error


注意error用法

其他3个状态使用:依次分别是合法、值改变、触屏点击

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    
<input type="email" name="myAddress" ng-model="myText" required></p>
    
<h1>状态</h1>
    
{{myForm.myAddress.$valid}}
    
{{myForm.myAddress.$dirty}}
    
{{myForm.myAddress.$touched}}
</form>

3.   Scope

scope是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ,如果你修改了视图,模型和控制器也会相应更新(数据的双向绑定)

 

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>