AngularJs指令

发布时间：2020-12-17 10:33:30 所属栏目：安全来源：网络整理

导读：AngularJS中的指令可以理解为对html元素扩展的属性包含许多内置指令同时支持自定义指令所有指令均以ng-作为前缀，如： ng-app定义一个应用 ng-init初始化数据 ng-model绑定数据 1. ng-model 数据绑定使用ng-model将AngularJS数据和html元素（input,text-

AngularJS中的指令可以理解为对html元素扩展的属性

包含许多内置指令

同时支持自定义指令

所有指令均以ng-作为前缀，如：

ng-app定义一个应用

ng-init初始化数据

ng-model绑定数据

1. ng-model 数据绑定

使用ng-model将AngularJS数据和html元素（input,text-area,select）绑定

<div ng-app="" ng-init="quantity=1;price=5">
    Quantity: <input type="number" ng-model="quantity">
    Costs: <input type="number" ng-model="price">
    Total in dollar: {{quantity * price}}
</div>

2. ng-repeat 重复绘出HTML元素

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>Looping with ng-repeat:</p>
  <select>
    <option value="-1">please select</option>
    <option ng-repeat="x in names">{{x}}</option>
  </slect>
</div>

3.自定义指令

使用.directive函数
命名规则：必须是驼峰命名规则

调用名称规则：将驼峰单词拆开且变成小写，利用＇-＇连接

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp",[]);
app.directive("w3TestDirective",function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!