angularjs指令作用及用法

来源：互联网发布：centos ip forward 编辑：程序博客网时间：2024/06/05 23:50

您可自由转发此文，但请保留出处：Ionic在线学习网站 http://www.ioniconline.com

1.ng-app

作用：定义了 AngularJS 应用程序的根元素。

    例1：构建的是一整套的angular应用，那么应该将ng-app作为<html>标签的一部分 像：               <html ng-app＝"HealthKnowledge">        .......        </html>                 这就告知angular管理页面中所有的DOM元素。    例2：现有一个应用，这应用中期望使用像java、rails这样的技术来管理DOM，你就可以把ng-app放在某元素上（像页面上的<div>元素）告知angular来管理页面的某一部分 像：        <html>        .......        <div ng-app="HealthKnowledge"> ........</div>        .......        </html>

2.NG-INIT

作用：初始化应用程序数据。

    例：      <div ng-app="" ng-init="firstName='John'">        <p>在输入框中尝试输入：</p>            <p>姓名：<input type="text" ng-model="firstName"></p>            <p>你输入的为： {{ firstName }}</p>    </div>通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。

3.NG-BIND

作用：显示和更新文本。

    例：<p ng-bind="greeting"></p>  模型变量greeting的值就会显示在html中.    等价效果： <p>{{greeting}}</p>    两者的区别：使用双括号语法，在应用加载index.html的时候，angular用数据替换大括号前，用户也能看到未渲染的模块.  ng-bind这种形式就不会。

4.NG-MODEL

作用：绑定 HTML 元素到应用程序数据。也可以为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。

5.NG-CHANGE

作用：根据ng-model元素的变化，作出相应的变化。

6.NG-CONTROLLER

作用：指定html属于哪个控制器。

    例1：绑定一个复选框到属性    <form ng-controller="somecontroller">        <input type="checkbox" ng-model="checkedit">    </form>    选中它， somecontroller中的$scope 一个叫checkedit属性值会变成true。不选中的话checked就是false，相反改变checkedit的值也会改变复选框的选择情况。    例2:绑定一个输入框用ng-change 属性来指定一个控制器的方法,当用户输入的值发生变化时将被调用    <form ng-controller="StartUpController">       Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">       Recommendation: {{funding.needed}}       </form>     对应controller中    function StartUpController($scope) {        $scope.funding = { startingEstimate: 0 };        $scope.computeNeeded = function() {       $scope.funding.needed = $scope.funding.startingEstimate*10;};        }     上面会有潜在问题：当用户在输入框中输入时,我 们只是重新计算了需要的数量。如果在这种场景下当用户输入时,输入框只是做了更新,这 看上去运行的很好。但是倘若其他的输入框也绑定到这个模型的属性该怎么办?倘若当来自 服务器的数据,是否会更新呢？ 这时我们可以用$scope的$watch函数更新这个字段。           在StartUpController最下面添加：    $scope.$watch('funding.startingEstimate', computeNeeded);       这时ng-change可以去掉了，因为功能被$watch代替了，

7.NG-SUBMIT

作用：管理多个输入框的表单,那么你可以在表单上用 ng-submit 标识符指定一个函数,当表单整体结束提交时调用这个函数。

    例：    <form ng-submit="requestFunding()" ng-controller="StartUpController">             Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">             Recommendation: {{needed}}           <button>Fund my startup!</button>          </form>        function StartUpController($scope) {            $scope.computeNeeded = function() {            $scope.needed = $scope.startingEstimate * 10;            };            $scope.requestFunding = function() {            window.alert("Sorry, please get more customers first.");            };    }

8.NG-REPEAT

作用：重复HTML元素

    例：    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">        <p>使用 ng-repeat 来循环数组</p>        <ul>        <li ng-repeat="x in names">            {{ x }}        </li>        </ul>    <div>

9.NG-CLASS

作用：用于动态自定义dom元素的css class name。

在实际的应用场景中还是比较灵活的，而在AngularJS中一般有四种方式给元素的class属性做一些门道，如下：

9.1scope变量绑定（不推荐使用）

function ctr($scope){     $scope.test =“classname”;}<div class=”{{test}}”></div>

这种方式完全没错，是angular提供的一种改变class的方式，但是在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object。

9.2字符串数组形式

function Ctr($scope) {       $scope.isActive = true;}   <div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>

其结果是2中组合，isActive表达式为true，则 active，负责inactive。

9.3表达式形式

function Ctr($scope) { }<div ng-class="row.point >=0?'style1':'style2'" ></div>

当point>0的时候执行style1，否则style2

9.4对象key/value处理

function Ctr($scope) { }<div ng-class = "{'selected': isSelected, 'car': isCar}"></div>

当 isSelected = true 则增加selected class，当isCar=true,则增加car class。以此类推。

10.NG-STYLE

作用：用来设置元素的style属性的css值

例：    <input type="button" value="set color" ng-click="myStyle={color:'red'}">    <input type="button" value="set background" ng-click="myStyle={'background-color':'blue', color: 'black'}">    <span ng-style="myStyle">Sample Text</span>

ng-style指定的表达式必须是个单层的json对象，key和value对应css属性的名称和值。注意如果css属性名中有“-”连接符，需要用引号括起来。

0 0