您的位置：首页 > Web前端 > JavaScript

Angular Js总结（一）

2016-04-21 17:34 615 查看

Angular Js总结（一）创建自定义指令
使用驼峰法来命名一个指令， 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>限制使用：E 只限元素名使用 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>我的名字是 `name`</h1>

</div>

<script>var app =angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
$scope.name = "John Dow";
});</script>
根作用域：$rootScope注：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。 4. 过滤器过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式、指令中用法例如：<p>姓名为 {{ lastName | uppercase }}</p> <li ng-repeat="x in names | orderBy:'country'">
{{x.name + ', ' + x.country }}
</li> 过滤输入时要注意：输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称例：<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{(x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div> 5. 服务ServiceAngularJS 内建了30 多个服务（服务可以作为参数传递到controller中）一些常用的服务有：有个 $location 服务，它可以返回当前页面的 URL 地址。$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。AngularJS $timeout 服务对应了 JS window.setTimeout 函数 AngularJS $interval 服务对应了 JS window.setInterval 函数创建自定义服务实例：创建名为hexafy 的访问:app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});使用自定义的的服务 hexafy 将一个数字转换为16进制数:app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
}); 下面给个实例，注意遍历以及自定义的服务在自定义的过滤器中的使用app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);
app.controller('myCtrl', function($scope) {
$scope.counts = [255, 251, 200];
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js angular

相关文章推荐

新的分享

章节导航

Angular Js总结（一）

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

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