您的位置：首页 > Web前端 > AngularJS

AngularJS – 指令

2015-12-03 16:34 543 查看


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

Built-in指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML， 带有前缀 ng-。

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

将以下代码保存成 test.html， 然后用浏览器打开

<!DOCTYPE html>

<html>

<body>

<div ng-app="" ng-init="name='smith'">

<p>在输入框中尝试输入:</p>

<p>姓名: <input type="text" ng-model="name"></p>

<p>你输入的为: {{ name }}</p>

</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>

</html>

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的作用域。


自定义指令

自定义myhello指令

myhelloDirect.html:

<!DOCTYPE html>

<html ng-app='app'>

<body>

<myhello></myhello>

</body>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js "></script>

<script src="./myhello.js"></script>

</html>

代码里面的<myhello>标签，浏览器并不认识，为了让浏览器能够认识这个标签，我们需要使用Angular来定义一个myhello指令， 或者说把<myhello>这种不认识的标签替换成浏览器能识别的那些标准HTML标签。

myhello.js:

var helloModule = angular.module('app', []);

appModule.directive('myhello', function() {

return {

restrict: 'E',

template: '<div>Coming my hello</div>',

replace: true

};});

可以看到，<myhello>这个已经被<div> Coming my hello </div>这个标签替换掉了，这是以上JS代码里面replace:true的配置起到作用了，代码里面的template配置项就是我们要的div标签，至于restrict:'E'这个配置项的含义：

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches class name

实际效果在浏览器看到的内容如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航