Angular——内置指令

内置指令

ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }

        .yellow {
            color: yellow;
        }
    </style>
</head>
<body ng-app="App">
<div ng-controller="DemoController">
    <h1 ng-show="false">ng-show</h1>
    <h1 ng-hide="true">ng-hide</h1>
    <h1 ng-if="false">ng-if</h1>
    <img ng-src="{{path}}">
    <span ng-class="{red:true,blue:true}">ng-class</span>
</div>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', function ($scope) {
        $scope.path = './images/2203.png';
    }]);
    //ng-if可以将元素直接移除,ng-show与ng-hide页面虽然看不到,但是检查依然可以看见
    //ng-src scr的值若是一个绑定的值,浏览器渲染的时候会发送请求,因为没解析到脚本,所以不认识这里会有一个小bug,直到
    //解析到了脚本以后才会去替换这个img标签里src的值
    //ng-href同上
</script>
</body>
</html>
原文地址:https://www.cnblogs.com/wuqiuxue/p/8410435.html