版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27948659/article/details/79539630
AngularJS 指令
- AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
- ng-app 指令初始化一个 AngularJS 应用程序。
- ng-init 指令初始化应用程序数据。
- ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
- (ng-app 指令告诉 AngularJS，
元素是 AngularJS 应用程序 的”所有者”。)
<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>
ng-app 指令
- ng-app 指令定义了 AngularJS 应用程序的 根元素。
- ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
ng-model 指令
- ng-model 指令 绑定 HTML 元素 到应用程序数据。
- ng-model 指令也可以：
- 为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng-repeat 指令
- ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
创建自定义的指令
- 你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令，ymcDirective, 但在使用它时需要以 - 分割, ymc-directive
-
当然也可以限制使用标签 - E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
<body ng-app="myApp">
<ymc-directive></ymc-directive>
<script>
var app = angular.module("myApp", []);
app.directive("ymcDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
Angluar js 模型
- ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
双向绑定
在修改 输入框的值 后，标签也会随着变化
<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 = "ymc";
});
</script>
（例子） 使用双向绑定测试
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
使用 $error.email 来判断标签 输入格式是否是 ecail，不是则显示 apan标签的内容
dirty (如果值改变则为 true)
$touched (如果通过触屏点击则为 true)
scope 是模型。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "ymc";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>