Angular1.x关于module,controller,作用域的概念
Angular中控制器是一个函数,是用来增强视图的,用来向视图的作用域添加功能。默认的控制器函数,是定义在全局作用域中的。如 function myController($scope){ $scope.message ='hi guys!' } 创建一个控制器时,angular会生成一个新的$scope(局部作用域),控制器的作用域是可以嵌套的,如父控制器和子控制器。 $scope可以
$rootscope是和根ng-app绑定的。 为了避免污染全局,就要用到模块,修改为如下 angular.module('myapp',[]) .controller('myController',function($scope){ $scope.message ='hi guys!' }) 和以上几个概念都有关的还有一个概念指令directives,可以理解为自定义html元素,和属性。 指令在创建时,angular也会为她创建一个作用域。这个作用域分为外部作用域和独立作用域。 来看下最简单的指令 <my-directive></my-directive> angular.module('myapp',[]) .directive('my-directive',function(){ return { restrict:'E',template:'<a href="http://baidu.com">Click me to baidu</a>' } }) 给指令传递数据,可以直接使用外部controller的作用域的属性。存在的问题是一旦控制器被移除或修改,我们的指令就要修改。 可以如下形式,通过创建独立作用域,使用绑定策略来传递数据给指令 <my-directive></my-directive> angular.module('myapp',[]) .directive('my-directive',function(){ return { scope:{}/*创建独立作用域*/ restrict:'E',template:'<a href="http://baidu.com">Click me to baidu</a>' } }) 实例如下 <div my-directive my-url="http://baidu.com" my-link-text="Click me to baidu"> angular.module('myapp',[]) .directive('my-directive',function(){ return{ restrict:'A',repalce:true,scope:{ myUrl:@,myLinkText:@ },template:'<a href='{{myUrl}}'>'+'{{myLinkText}}</a>' }; }); 独立作用域绑定策略有3种:@,=,&。 &绑定,对于带参数的调用,需要传递一个对象,对象的key是参数名称,值是参数内容。 如<div show="show(email)">,在指令中调用show({email:data}) 最后就controller与scope的概念再举例说命一下,一定要知道controller就是函数,$scope是局部作用域。 var module=angular.module('myApp',[]) // module.controller('mainController',function() { // // body...// this.name ="Ari"; // this.hello = function(){ // alert('hi'); // } // }); module.controller('mainController',mainController); function mainController(){ this.name ="Ari"; this.hello = function(){ alert('hi'); } } module.controller('controller2',controller2); function controller2($scope){ $scope.sex ="女"; } 借用controler as可以在代码中去除对$scope的依赖,让你写出耦合性小的纯JS函数。 ** 可以规定对于controller as的写法如下:链接 angular.module("app",[]) .controller("demoController",[function(){ var vm = this; vm.title = "angualr"; return vm; }]) 其优势为:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |