AngularJs指令

最新推荐文章于 2024-05-13 14:54:25 发布

monkey_four

最新推荐文章于 2024-05-13 14:54:25 发布

阅读量325

点赞数

分类专栏： AngularJS学习文章标签： angularjs

本文链接：https://blog.csdn.net/monkey_four/article/details/51648040

版权

AngularJS学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>