angularjs指令作用及用法

最新推荐文章于 2022-05-02 09:52:57 发布

ioniconline

最新推荐文章于 2022-05-02 09:52:57 发布

阅读量1.9k

点赞数

分类专栏： Ionic-基础篇文章标签： ionic angularjs cordova hybrid

本文链接：https://blog.csdn.net/ioniconline/article/details/50162905

版权

Ionic-基础篇专栏收录该内容

26 篇文章 0 订阅

订阅专栏

您可自由转发此文，但请保留出处：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属性名中有“-”连接符，需要用引号括起来。