AngularJS控制指令

来源：互联网发布：制作图片软件编辑：程序博客网时间：2024/05/29 18:29

AngularJS的指令

控制器在Angularjs中的作用是增强视图，它实际就是一个函数，用来向视图中的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。

当我们在页面上创建一个控制器时，Angularjs会生成并传递一个$scope给这个控制器，由于Angularjs会自动实例化控制器，所以我们只需要写构造函数即可。

常见指令，按照指令的功能，划分为五大类

1.控制指令，用于Angular应用程序加载流程控制
2.渲染指令，用于Angular将数据在网页中进行展示/隐藏处理
3.节点指令，用于Angular对标签、属性、样式、内容进行处理的指令
4.事件指令，用于处理常规事件操作的指令
5.其他指令....

控制指令：

1、ng-app：

用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行
在定义应用程序运行入口的同时，可以绑定一个DOM元素
DOM元素的开始标签和结束标签之间~就可以认为是模块的作用范围

Angular通过ng-app指令，实现自动引导程序运行，底层是通过
bootstrap()进行模块DOM元素加载，开始运行！

ng-app 没有模块，可以引导Angular运行吗？
<html ng-app>
// angular引用可以运行吗？可以运行
Angular会将页面中出现的支持的语法进行解释运行！
但是不能使用模块控制器中定义的/挂载的数据，超出了作用范围！
ng-app="模块名称"
该模块就会作为Angular的根模块出现，整个作用范围中，页面View和数据Model可以进行无缝交互！
</html>

2、 ng-controller
模块中，可以给模块挂载一个或者多个控制器
挂载好的控制器在当前模块范围内，可以通过ng-controller指令来指定控制器的作用范围

目前常规控制器的做法：
（1）先声明模块
（2）模块下挂载控制器—— 控制器的作用范围仅限于当前模块！（局部控制器）
Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的
//控制器：全局控制器
function control($scope) {
$scope.name = "tom";//挂载数据
}
全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改

废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

<html><head>    <meta charset="UTF-8">    <title>控制指令</title>    <script src="angular.min.js"></script></head><body>    <!-- name被Angular解释为变量，'tom'被解释为变量值 -->    <!-- name2被Angular解释为变量，n2被解释为变量-->    <div ng-init="name='tom';name2=n2">        {{name}}**{{name2}}        <div>greeting: <span ng-bind="greeting"></span></div>    </div>    <!-- 控制器 -->    <div ng-app="myApp">        <div ng-controller="myCtrl">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>        <div ng-controller="myCtrl2">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>    </div>    <div id="myApp2">        <div ng-controller="myApp2Ctrl">            <div>局部控制器App2范围：<span ng-bind="hello"></span></div>        </div>        <div ng-controller="myCtrl2">            <div>局部控制器范围：<span ng-bind="greeting"></span></div>        </div>    </div>    <script>        var app = angular.module("myApp", []);        app.controller("myCtrl" , ["$scope", function($scope){            $scope.greeting = "hello ng-app!"        }]);        app.controller("myCtrl2" , ["$scope", function($scope){            $scope.greeting = "hello ng-app!"        }]);        var app2 = angular.module("myApp2", []);        app2.controller("myApp2Ctrl", ["$scope",function($scope) {            $scope.hello = "my app2 ctrl value!";        }]);        var _mp2 = document.getElementById("myApp2");        angular.bootstrap(_mp2, ["myApp2"]);    </script></body></html>

0 0