首页 > 代码库 > Angular内置指令

Angular内置指令

2024-08-22 18:20:32   221人阅读

 Angular内置指令

   以ng前缀开头的都是内置指令，因此不要以ng开头命名自定义指令。此外还有其他内置指令在标签中不易发现，如<a>和<form>。


一，布尔属性　

　

1  ng-disabled
可以在input，textarea，select，button绑定
 
例一：按钮一直禁用，直到用户在文本字段中输入内容
<input type="text" ng-model="someProperty" placeholder="TypetoEnable">
<button ng-model="button" ng-disabled="!someProperty">AButton</button>

例二：文本字段会被禁用五秒，直到在 $timeout 中将 isDisabled 属性设置为 true

<textarea ng-disabled="isDisabled">Wait5seconds</textarea>
<script>
        var myapp =angular.module(‘myapp‘, []);
    myapp.run(function($rootScope, $timeout) {
        $rootScope.isDisabled = true;
        $timeout(function() {
            $rootScope.isDisabled = false;
        }, 5000);
    });
</script>

2. ng-readonly

表示只读(只能看到,不能修改)的输入域(框)
例子，第一个输入框有文本时第二个输入框只读

Type here to make sibling readonly:
<input type="text" ng-model="someProperty"><br/>
<input type="text"
ng-readonly="someProperty"
value="Some text here"/>

3. ng-checked

例，通过 ng-init 指令将 someProperty 的值设置为 true ，将 some Property
同 ng-checked 绑定在一起。

<label>someProperty = {{someProperty}}</label>
<input type="checkbox"
ng-checked="someProperty"
ng-init="someProperty = true"
ng-model="someProperty">

4. ng-selected
ng-selected 可以对是否出现 option 标签的 selected 属性进行绑定

<label>Select Two Fish:</label>
<input type="checkbox"
ng-model="isTwoFish"><br/>
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>

 

二，类布尔属性

 

1，ng-href

作用域中的属性动态创建URL,两秒后链接有效

<a ng-href="{{ myHref }}">I‘m feeling lucky, when I load</a>
<script>
    angular.module(‘myApp‘, [])
    .run(function($rootScope, $timeout) {
        $timeout(function() {
           $rootScope.myHref = ‘http://google.com‘;
        }, 2000);
    });
</script>

2. ng-src
AngularJS会告诉浏览器在 ng-src 对应的表达式生效之前不要加载图像

<h1>WrongWay</h1>
<img src="{{imgSrc}}"/>
<h1>Rightway</h1>
<img ng-src="{{imgSrc}}"/>
<script>
    var myapp =angular.module(‘myapp‘, []);
    myapp.run(function($rootScope, $timeout) {
        $timeout(function() {
            $rootScope.imgSrc = ‘images/bally.jpg‘;
        }, 2000);
    });
</script>


三，在指令中使用子作用域

1. ng-app
任何具有 ng-app 属性的DOM元素将被标记为 $rootScope 的起始点。
$rootScope 是作用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它。

2 ng-controller

内置指令 ng-controller 的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作模型都定义在 $rootScope 上。用这个指令可以在一个DOM元素上放置控制器。ng-controller 接受一个参数 expression ，这个参数是必需的。

3. ng-include
使用 ng-include 可以加载、编译并包含外部HTML片段到当前的应用中

 

 

 

 

 

 

 

 

 

 

Angular内置指令


联系
我们