AngularJs:Controller数据共享、继承、通信使用详解

最新推荐文章于 2020-06-07 16:25:26 发布
最新推荐文章于 2020-06-07 16:25:26 发布
阅读量549 收藏
点赞数
摘要：本文主讲了 AngularJS中的Controller中数据共享、继承、通信的详细使用

本教程使用angularjs版本：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址：https://angularjs.org/

一、controller基础与用法

          AngularJS中的controller中文名就是控制器，它是一个JavaScript函数（类型/类），用来向视图的作用域（$scope）添加额外的功能。而且每个controller都有自己的scope， 同时也可以共享他们父controller的scope内的数据。

其能实现的功能如下：

（1）给作用域对象设置初始状态

你可以通过创建一个模型属性来设置初始作用域的初始状态。 比如:

[html] view plain copy
print ?
  1. var app = angular.module('myApp', []);  
  2. app.controller('myController', function($scope) {  
  3.     $scope.inputValue = "林炳文Evankaka";  
  4. });  
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    $scope.inputValue = "林炳文Evankaka";
});
上面我们设置了一个inputValue，如果要在html页面中使用，就可以直接用{{inputValue}},如下：

[html] view plain copy
print ?
  1. <h1>您输入的内容为：{{inputValue}}</h1>  
<h1>您输入的内容为：{{inputValue}}</h1>
当然，你也可以将此数据双向绑定到一个input、select等，如下：

[html] view plain copy
print ?
  1. <input  type="text" ng-model = "inputValue">  
<input  type="text" ng-model = "inputValue">

（2）给作用域对象增加行为


AngularJS作用域对象的行为是由作用域的方法来表示的。这些方法是可以在模板或者说视图中调用的。这些方法和应用模型交互，并且能改变模型。
如我们在模型那一章所说的，任何对象（或者原生的类型）被赋给作用域后就会变成模型。任何赋给作用域的方法，都能在模板或者说视图中被调用，并且能通过表达式或者ng事件指令调用。如下：

[html] view plain copy
print ?
  1. var app = angular.module('myApp', []);  
  2. app.controller('myController', function($scope) {  
  3.     $scope.myClick = function(){  
  4.         alert("click");  
  5.     }  
  6. });  
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    $scope.myClick = function(){
    	alert("click");
    }
});
然后页面上使用：

[html] view plain copy
print ?
  1. <button ng-click= "myClick()" ></button>    
<button ng-click= "myClick()" ></button>
这样就给button添加了一个点击事件


二、controller继承

这里说的继承一般说的是scope数据，这是因为子控制器的作用域将会原型继承父控制器的作用域。因此当你需要重用来自父控制器中的功能时，你所要做的就是在父作用域中添加相应的方法。这样一来，自控制器将会通过它的作用域的原型来获取父作用域中的所有方法。

如下实例：

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.     <div ng-controller = "parentCtrl">  
  10.         <p><input  type="text" ng-model = "value1">请输入内容</p>  
  11.         <h1>您输入的内容为：{{value1}}</h1>  
  12.           <div ng-controller = "childCtrl">  
  13.             <button ng-click = "gerParentValue()"></button>  
  14.           </div>  
  15.     </div>  
  16.   
  17. </body>  
  18. <script type="text/javascript">  
  19. var app = angular.module('myApp', []);//获得整个angularJS影响的html元素  
  20. app.controller('parentCtrl',function($scope){  
  21.     $scope.value2 = "我是林炳文";  
  22. });    
  23.   
  24. app.controller('childCtrl',function($scope){  
  25.     $scope.gerParentValue = function() {  
  26.         alert($scope.value1 + $scope.value2);  
  27.     }  
  28. });   
  29. </script>  
  30. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>AngularJS入门学习</title>
	<script type="text/javascript"  src="./1.5.3/angular.min.js"></script>
</head>
<body>
    <div ng-controller = "parentCtrl">
	    <p><input  type="text" ng-model = "value1">请输入内容</p>
	    <h1>您输入的内容为：{{value1}}</h1>
	      <div ng-controller = "childCtrl">
		    <button ng-click = "gerParentValue()"></button>
	      </div>
	</div>

</body>
<script type="text/javascript">
var app = angular.module('myApp', []);//获得整个angularJS影响的html元素
app.controller('parentCtrl',function($scope){
    $scope.value2 = "我是林炳文";
});  

app.controller('childCtrl',function($scope){
    $scope.gerParentValue = function() {
    	alert($scope.value1 + $scope.value2);
    }
}); 
</script>
</html>


这里需要注意的是childCtrl所在的DIV一定要放在parentCtrl所在的DIV里才会生效！而且如果你需要从父控制器中调用子控制器的方法，那么使用上面的代码会发生错误。


三、controller之间共享数据

(1)在父级controller中定义scope,子级共用

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.    <div  ng-controller="paretnCtrl">  
  10.      <input type="text" ng-model="name" />  
  11.      <div ng-controller="childCtrl1">  
  12.         {{name}}  
  13.         <button ng-click="setName()">set name to jack jack jack</button>  
  14.      </div>  
  15.      <div ng-controller="childCtrl2">  
  16.         {{name}}  
  17.         <button ng-click="setName()">set name to tom tom tom</button>  
  18.      </div>  
  19.    </div>  
  20. </body>  
  21. <script type="text/javascript">  
  22. var app = angular.module('myApp', []);  
  23. app.controller('paretnCtrl', function($scope,$timeout) {  
  24.     $scope.name = "林炳文Evankaka";  
  25. });  
  26. app.controller('childCtrl1', function($scope,$timeout) {  
  27.     $scope.setName = function() {  
  28.          $scope.name = "set name to jack jack jack";  
  29.     };  
  30. });  
  31. app.controller('childCtrl2', function($scope,$timeout) {  
  32.     $scope.setName = function() {  
  33.         $scope.name = "set name to tom tom tom";  
  34.     };  
  35. });  
  36. </script>  
  37. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门学习</title>
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
   <div  ng-controller="paretnCtrl">
     <input type="text" ng-model="name" />
     <div ng-controller="childCtrl1">
        {{name}}
        <button ng-click="setName()">set name to jack jack jack</button>
     </div>
     <div ng-controller="childCtrl2">
        {{name}}
        <button ng-click="setName()">set name to tom tom tom</button>
     </div>
   </div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('paretnCtrl', function($scope,$timeout) {
    $scope.name = "林炳文Evankaka";
});
app.controller('childCtrl1', function($scope,$timeout) {
    $scope.setName = function() {
         $scope.name = "set name to jack jack jack";
    };
});
app.controller('childCtrl2', function($scope,$timeout) {
    $scope.setName = function() {
    	$scope.name = "set name to tom tom tom";
    };
});
</script>
</html>

（2）将数据全局共享

angularjs自身有二种，设置全局变量的方法，在加上js的设置全局变量的方法，总共有三种。要实现的功能是，在ng-app中定义的全局变量，在不同的ng-controller里都可以使用。
通过var 直接定义global variable，这根纯js是一样的。
用angularjs value来设置全局变量 。
用angularjs constant来设置全局变量 。

下面是使用value的方式

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.      <div ng-controller="childCtrl1">  
  10.         {{name}}  
  11.         <button ng-click="setName()">set name to jack jack jack</button>  
  12.      </div>  
  13.      <div ng-controller="childCtrl2">  
  14.         {{name}}  
  15.         <button ng-click="setName()">set name to tom tom tom</button>  
  16.      </div>  
  17. </body>  
  18. <script type="text/javascript">  
  19. var app = angular.module('myApp', []);  
  20. app.value('data',{'name':'我是林炳文'});  
  21. app.controller('childCtrl1', function($scope,data) {  
  22.     $scope.name = data.name;  
  23.     $scope.setName = function() {  
  24.          $scope.name = "set name to jack jack jack";  
  25.     };  
  26. });  
  27. app.controller('childCtrl2', function($scope,data) {  
  28.        $scope.name = data.name;  
  29.        $scope.setName = function() {  
  30.         $scope.name = "set name to tom tom tom";  
  31.     };  
  32. });  
  33. </script>  
  34. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门学习</title>
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
     <div ng-controller="childCtrl1">
        {{name}}
        <button ng-click="setName()">set name to jack jack jack</button>
     </div>
     <div ng-controller="childCtrl2">
        {{name}}
        <button ng-click="setName()">set name to tom tom tom</button>
     </div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.value('data',{'name':'我是林炳文'});
app.controller('childCtrl1', function($scope,data) {
	$scope.name = data.name;
    $scope.setName = function() {
         $scope.name = "set name to jack jack jack";
    };
});
app.controller('childCtrl2', function($scope,data) {
	   $scope.name = data.name;
       $scope.setName = function() {
    	$scope.name = "set name to tom tom tom";
    };
});
</script>
</html>

（3）service依赖注入

angularjs最突出的特殊之一就是DI， 也就是注入， 利用service把需要共享的数据注入给需要的controller。这是最好的方法

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9.      <div ng-controller="childCtrl1">  
  10.         {{name}}  
  11.         <button ng-click="setName()">set name to jack jack jack</button>  
  12.      </div>  
  13.      <div ng-controller="childCtrl2">  
  14.         {{name}}  
  15.         <button ng-click="setName()">set name to tom tom tom</button>  
  16.      </div>  
  17. </body>  
  18. <script type="text/javascript">  
  19. var app = angular.module('myApp', []);  
  20. app.factory('dataService', function() {  
  21.   var service = {  
  22.      name:'我是林炳文'  
  23.    };  
  24.    return service;  
  25. });  
  26. app.controller('childCtrl1', function($scope,dataService) {  
  27.     $scope.name = dataService.name;  
  28.     $scope.setName = function() {  
  29.          $scope.name = "set name to jack jack jack";  
  30.     };  
  31. });  
  32. app.controller('childCtrl2', function($scope,dataService) {  
  33.        $scope.name = dataService.name;  
  34.        $scope.setName = function() {  
  35.         $scope.name = "set name to tom tom tom";  
  36.     };  
  37. });  
  38. </script>  
  39. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门学习</title>
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
     <div ng-controller="childCtrl1">
        {{name}}
        <button ng-click="setName()">set name to jack jack jack</button>
     </div>
     <div ng-controller="childCtrl2">
        {{name}}
        <button ng-click="setName()">set name to tom tom tom</button>
     </div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.factory('dataService', function() {
  var service = {
     name:'我是林炳文'
   };
   return service;
});
app.controller('childCtrl1', function($scope,dataService) {
	$scope.name = dataService.name;
    $scope.setName = function() {
         $scope.name = "set name to jack jack jack";
    };
});
app.controller('childCtrl2', function($scope,dataService) {
	   $scope.name = dataService.name;
       $scope.setName = function() {
    	$scope.name = "set name to tom tom tom";
    };
});
</script>
</html>

四、controller之间通信

 在一般情况下基于继承的方式已经足够满足大部分情况了，但是这种方式没有实现兄弟控制器之间的通信方式，所以引出了事件的方式。基于事件的方式中我们可以里面作用的$on,$emit,$boardcast这几个方式来实现，其中$on表示事件监听，$emit表示向父级以上的
作用域触发事件， $boardcast表示向子级以下的作用域广播事件。

$emit只能向parent controller传递event与data
$broadcast只能向child controller传递event与data
$on用于接收event与data

实例一：

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9. <div ng-app="app" ng-controller="parentCtr">  
  10.      <div ng-controller="childCtr1">childCtr1 name :  
  11.          <input ng-model="name" type="text" ng-change="change(name)" />  
  12.     </div>  
  13.      <div ng-controller="childCtr2">from childCtr1 name:  
  14.          <input ng-model="ctr1Name" />  
  15.      </div>  
  16. </div>  
  17. </body>  
  18. <script type="text/javascript">  
  19. var app = angular.module('myApp', []);  
  20. app.controller("parentCtr",function ($scope) {  
  21.     $scope.$on("Ctr1NameChange",function (event, msg) {//接收到来自子childCtr1的信息后再广播给所有子controller  
  22.         console.log("parent", msg);  
  23.         $scope.$broadcast("Ctr1NameChangeFromParrent", msg);//给所有子controller广播  
  24.     });  
  25. });  
  26. app.controller("childCtr1", function ($scope) {  
  27.     $scope.change = function (name) {  
  28.         console.log("childCtr1", name);  
  29.         $scope.$emit("Ctr1NameChange", name);//将信息传递给父controller  
  30.     };  
  31. }).controller("childCtr2", function ($scope) {  
  32.     $scope.$on("Ctr1NameChangeFromParrent",function (event, msg) { //监听来自父controller的信息  
  33.         console.log("childCtr2", msg);  
  34.         $scope.ctr1Name = msg;  
  35.     });  
  36. });  
  37. </script>  
  38. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门学习</title>
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="parentCtr">
     <div ng-controller="childCtr1">childCtr1 name :
         <input ng-model="name" type="text" ng-change="change(name)" />
    </div>
     <div ng-controller="childCtr2">from childCtr1 name:
         <input ng-model="ctr1Name" />
     </div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller("parentCtr",function ($scope) {
    $scope.$on("Ctr1NameChange",function (event, msg) {//接收到来自子childCtr1的信息后再广播给所有子controller
        console.log("parent", msg);
        $scope.$broadcast("Ctr1NameChangeFromParrent", msg);//给所有子controller广播
    });
});
app.controller("childCtr1", function ($scope) {
    $scope.change = function (name) {
        console.log("childCtr1", name);
        $scope.$emit("Ctr1NameChange", name);//将信息传递给父controller
    };
}).controller("childCtr2", function ($scope) {
    $scope.$on("Ctr1NameChangeFromParrent",function (event, msg) { //监听来自父controller的信息
        console.log("childCtr2", msg);
        $scope.ctr1Name = msg;
    });
});
</script>
</html>

实例二：

[html] view plain copy
print ?
  1. <!DOCTYPE html>  
  2. <html lang="zh" ng-app="myApp">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>AngularJS入门学习</title>  
  6.     <script type="text/javascript" src="./1.5.3/angular.min.js"></script>  
  7. </head>  
  8. <body>  
  9. <div ng-controller="ParentCtrl">                <!--父级-->  
  10.     <div ng-controller="SelfCtrl">              <!--自己-->  
  11.          <button ng-click="click()">click me</button>  
  12.         <div ng-controller="ChildCtrl">  
  13.               
  14.         </div>   <!--子级-->  
  15.     </div>  
  16.     <div ng-controller="BroCtrl">  
  17.           
  18.     </div>         <!--平级-->  
  19. </div>  
  20. </body>  
  21. <script type="text/javascript">  
  22. var app = angular.module('myApp', []);  
  23. app.controller('SelfCtrl', function($scope) {  
  24.   $scope.click = function () {  
  25.     $scope.$broadcast('to-child', 'child');  
  26.     $scope.$emit('to-parent', 'parent');  
  27.   }  
  28. });  
  29.   
  30. app.controller('ParentCtrl', function($scope) {  
  31.   $scope.$on('to-parent', function(event,data) {  
  32.     console.log('ParentCtrl', data);       //父级能得到值  
  33.   });  
  34.   $scope.$on('to-child', function(event,data) {  
  35.     console.log('ParentCtrl', data);       //子级得不到值  
  36.   });  
  37. });  
  38.   
  39. app.controller('ChildCtrl', function($scope){  
  40.   $scope.$on('to-child', function(event,data) {  
  41.     console.log('ChildCtrl', data);      //子级能得到值  
  42.   });  
  43.   $scope.$on('to-parent', function(event,data) {  
  44.     console.log('ChildCtrl', data);      //父级得不到值  
  45.   });  
  46. });  
  47.   
  48. app.controller('BroCtrl', function($scope){    
  49.   $scope.$on('to-parent', function(event,data) {    
  50.     console.log('BroCtrl', data);         //平级得不到值    
  51.   });    
  52.   $scope.$on('to-child', function(event,data) {    
  53.     console.log('BroCtrl', data);         //平级得不到值    
  54.   });    
  55. });  
  56. </script>  
  57. </html>  
<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS入门学习</title>
    <script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<div ng-controller="ParentCtrl">                <!--父级-->
    <div ng-controller="SelfCtrl">              <!--自己-->
         <button ng-click="click()">click me</button>
        <div ng-controller="ChildCtrl">
        	
        </div>   <!--子级-->
    </div>
    <div ng-controller="BroCtrl">
    	
    </div>         <!--平级-->
</div>
</body>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('SelfCtrl', function($scope) {
  $scope.click = function () {
    $scope.$broadcast('to-child', 'child');
    $scope.$emit('to-parent', 'parent');
  }
});

app.controller('ParentCtrl', function($scope) {
  $scope.$on('to-parent', function(event,data) {
    console.log('ParentCtrl', data);	   //父级能得到值
  });
  $scope.$on('to-child', function(event,data) {
    console.log('ParentCtrl', data);	   //子级得不到值
  });
});

app.controller('ChildCtrl', function($scope){
  $scope.$on('to-child', function(event,data) {
    console.log('ChildCtrl', data);		 //子级能得到值
  });
  $scope.$on('to-parent', function(event,data) {
    console.log('ChildCtrl', data);		 //父级得不到值
  });
});

app.controller('BroCtrl', function($scope){  
  $scope.$on('to-parent', function(event,data) {  
    console.log('BroCtrl', data);		  //平级得不到值  
  });  
  $scope.$on('to-child', function(event,data) {  
    console.log('BroCtrl', data);		  //平级得不到值  
  });  
});
</script>
</html>
输出结果：


$emit和$broadcast可以传多个参数，$on也可以接收多个参数。

在$on的方法中的event事件参数，其对象的属性和方法如下

事件属性 目的
event.targetScope 发出或者传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
event.defaultPrevented 如果调用

五、 对于controller层的一些建议

1、controller层不要涉及到太多的业务逻辑，可以将公用的部分抽取到Service层

2、service层：主要负责数据交互和数据处理、处理一些业务领域上的逻辑；
3、controller层：主要负责初始化$scope的变量用于传递给view层，并且处理一些页面交互产生的逻辑;
4、当一个功能是设计远程API调用、数据集、业务领悟复杂逻辑、将会大量重复的运算方法时就可以考虑将代码以service形式注入controller层。

5、controller 里的 $scope 是唯一页面数据来源。不要直接修改 DOM。

6、controller 不要在全局范围


参考文章：

http://www.jianshu.com/p/1e1aaf0fd30a

http://cnodejs.org/topic/54dd47fa7939ece1281aa54f

http://www.html-js.com/article/1847

http://blog.51yip.com/jsjquery/1601.html

http://www.cnblogs.com/CraryPrimitiveMan/p/3679552.html?utm_source=tuicool&utm_medium=referral

http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html


转载自：http://blog.csdn.net/evankaka/article/details/51097039


想了解更多的知识，欢迎加入651308349、627336556  技术开发交流群，会有意想不到的收获~~~！！！

FLy6666666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS中controller控制器继承的使用方法
10-19
主要介绍了AngularJS中controller控制器继承的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS实现controller控制器间共享数据的方法示例
10-19
4. **使用 AngularJS 的路由参数**: 如果你的应用使用了 AngularJS 的路由功能，可以将共享数据作为路由参数传递。 **五、最佳实践** 在实际开发中，推荐使用服务来共享数据，因为服务具有更好的可测试性、可维护...
跟我学AngularJs:Controller数据共享、继承、通信使用详解
热门推荐
Evankaka的专栏
04-11 1万+
本文主讲了AngularJs中的Controller中基础使用、数据共享、继承、通信的详细使用. AngularJS中的controller中文名就是控制器，它是一个Javascript函数（类型/类），用来向视图的作用域（$scope）添加额外的功能。而且每个controller都有自己的scope， 同时也可以共享他们父controller的scope内的数据。
让AngularJS的controllers之间共享数据
weixin_34372728的博客
01-08 201
  如何让controller之间共享数据呢？大致是让不同controller中的变量指向同一个实例。通过service创建一个存放共享数据的对象。   .service("greeting", function Greeting(){ var greeting = this; greeting.message = "default"; })   让不同...
【AngularJS】controller的继承
iteye_5563的博客
11-07 416
谈到angularJS controller的继承，一般都会想到父子scope,对应的父子controller，才能做好继承。 实践中有这样的一个场景，有2套页面，页面组件，风格大部分都一样，不同的可能是绑定的数据等稍有不同，如果简单copy一下html模板，controll的js文件，也能达到完成任务的效果，但是坏处是一份代码写了2边，如果万一要调整代码，还要改写2份，那AngularJS有没...
AngularJS控制器之间的数据共享及通信详解
沈斯明技术博客
03-02 499
AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式，来实现数据和代码的共享和复用，但在实际的项目开发中，或许是处于懒惰，亦或是为了便利，总会想在两个控制器之间，直接进行数据的共享通信，或者是函数与方法的调用，这里我们就看看有哪些方法可以满足这个要求。 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式，因为是单例的，所
Angularjs的Controller间通信机制实例分析
10-21
- **使用服务（Services/Factories）**：对于更复杂的数据共享和状态管理，使用AngularJS的服务是一个更好的选择。服务是单例的，可以在任何地方注入并访问，减少了Controller间的直接依赖。 - **使用`$rootScope`...
AngularJS 控制器 controller的详解
10-19
主要介绍了AngularJS 控制器 controller的详解的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
AngularJS控制器controller正确的通信的方法
10-22
AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为
AngularJS:AngularJS的基础使用
05-20
5. **服务**：AngularJS中的服务是单例对象，可以跨控制器共享数据和功能。常见的服务有`$http`用于发送HTTP请求，`$rootScope`代表应用的顶级作用域，`$q`用于异步操作的承诺（Promise）管理。 6. **过滤器**：...
对angularjs框架下controller间的传值方法详解
10-17
比如，可以创建一个自定义服务（使用`$provider`或`.factory`、`.service`），并在需要通信的Controller中注入该服务，通过服务共享数据。服务的优势在于它们是单例的，可以在应用程序的任何地方使用，且生命周期与...
AngularJS：Curso de AngularJS
02-12
AngularJS的服务提供了一种共享代码和数据的方式，如$http服务用于发起HTTP请求，$scope服务作为控制器和视图之间的通信桥梁，$rootScope则是所有控制器共享的根作用域。 **6. 过滤器（Filters）** 过滤器用于格式...
AngularJS获取json数据的方法详解
10-19
在AngularJS中，获取JSON数据是常见的操作，主要用于与服务器进行数据交互，更新视图内容。AngularJS提供了多种方式来处理JSON数据，本篇文章将详细讲解如何在AngularJS中获取和展示JSON数据。 首先，我们需要了解...
angularjs:marcwan教程
05-24
- **双重绑定**：AngularJS的核心特性之一，它实现了视图和模型之间的实时同步，任何一方的改变都会反映到另一方。 - **依赖注入**：AngularJS自动管理对象的创建和依赖关系，简化了代码的编写和测试。 - **指令*...
在AngularJS控制器之间共享数据
asdfgh0077的博客
06-07 259
I'm trying to share data across controllers. 我正在尝试跨控制器共享数据。 Use-case is a multi-step form, data ent
angularjs数据共享
chenqk_123的专栏
09-08 1287
前面提到了angularjs的每个应用是基于APP的，而每个功能模块属于一个module，每个module的一些增删改查等单项功能以及数据层都是依赖于$scope，每个$scope都有其独有的作用域，不同的功能模块对应着不同的作用域。不同模块之间的$scope是不可共享的，而在实际的项目中我们又会发现会有一些方法参数需要在多个功能模块module之间传递，需要被多个module之间共享，这就好比j
Angulars Controller作用域继承
博客不一定要自己做
01-02 905
Angulars Controller创建的作用域是复制而非引用<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dasd</title> <script src="angular-1.0.1.min.js"></script> </head> <body
angular 组件间数据共享
AsuraSylar的博客
06-03 788
父子组件数据传递 父级向子级传递对象: @Input 例如：一个下拉框的列表数据 options 来自父组件。 子组件代码： import{Component,Input }from'@angular/core'; @Input()options:Array<string>; 在子组件中，可以自由使用 options 对象。 在 js 中通过 ...
AngularJS：下一代Web应用开发框架详解
AngularJS自2009年由Misko Hevery和Adam Abrons创建以来，凭借其数据绑定、MVC设计模式（Model-View-Controller，即$scope作为DataModel）、依赖注入（Dependency Injection）、模块化设计（Module）、服务（Service...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值