首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从另一个控制器调用angular js控制器

从另一个控制器调用AngularJS控制器可以通过以下几种方式实现:

  1. 使用服务(Service):创建一个共享数据的服务,可以在多个控制器之间共享数据和方法。在一个控制器中调用服务的方法,然后在另一个控制器中使用该服务获取数据或执行操作。

例如,创建一个名为"DataSharingService"的服务:

代码语言:javascript
复制
app.service('DataSharingService', function() {
  var sharedData = {};

  this.setData = function(data) {
    sharedData = data;
  };

  this.getData = function() {
    return sharedData;
  };
});

在第一个控制器中设置数据:

代码语言:javascript
复制
app.controller('Controller1', function($scope, DataSharingService) {
  var data = { name: 'John', age: 25 };
  DataSharingService.setData(data);
});

在第二个控制器中获取数据:

代码语言:javascript
复制
app.controller('Controller2', function($scope, DataSharingService) {
  var data = DataSharingService.getData();
  console.log(data); // { name: 'John', age: 25 }
});
  1. 使用事件广播(Event Broadcasting):在一个控制器中触发一个事件,然后在另一个控制器中监听该事件并执行相应的操作。

例如,在第一个控制器中触发事件:

代码语言:javascript
复制
app.controller('Controller1', function($scope, $rootScope) {
  var data = { name: 'John', age: 25 };
  $rootScope.$broadcast('dataUpdated', data);
});

在第二个控制器中监听事件:

代码语言:javascript
复制
app.controller('Controller2', function($scope, $rootScope) {
  $scope.$on('dataUpdated', function(event, data) {
    console.log(data); // { name: 'John', age: 25 }
  });
});
  1. 使用路由参数(Route Parameters):如果两个控制器之间通过路由进行导航,可以使用路由参数传递数据。

例如,在路由配置中定义参数:

代码语言:javascript
复制
app.config(function($routeProvider) {
  $routeProvider
    .when('/controller1/:name/:age', {
      templateUrl: 'controller1.html',
      controller: 'Controller1'
    })
    .when('/controller2/:name/:age', {
      templateUrl: 'controller2.html',
      controller: 'Controller2'
    });
});

在第一个控制器中导航到第二个控制器并传递参数:

代码语言:javascript
复制
app.controller('Controller1', function($scope, $location) {
  var name = 'John';
  var age = 25;
  $location.path('/controller2/' + name + '/' + age);
});

在第二个控制器中获取参数:

代码语言:javascript
复制
app.controller('Controller2', function($scope, $routeParams) {
  var name = $routeParams.name;
  var age = $routeParams.age;
  console.log(name); // 'John'
  console.log(age); // '25'
});

这些方法可以根据具体的需求选择使用,它们都可以实现从另一个控制器调用AngularJS控制器的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2、Angular JS 学习笔记 – 双向数据绑定和Scope概念

这是一个重要的点,因为它使得控制器不用知道将要如何显示,大大的提升了测试的环境; angular.module('scopeExample', []) .controller('MyController...作用域通知相关联的input,然后呈现出已经赋值的input,演示了控制器如何将数据写入到作用域中。...当浏览器调用js代码不在angular执行上下文时,意味着angular无法发现模型的修改。要正确的处理模型修改,执行就要在angular执行上下文中使用apply方法。...一个显式的调用只有在实现自定义事件的会调用使用,或在工作在第三方的库的回调中。 进入Angular执行上下文通过调用scope....如果有一个修改被检测到了,那么watch函数被调用用于更新dom为新的值。 一旦angular $digest循环完成,执行就会脱离angularjs上下文。

13.2K20

Angular JS + Express JS入门搭建网站

同时提供了控制器,Filter过滤器,Factory等服务。   Angular JS因为作用在前端,所以可以和任何服务器技术相结合,与Express JS就是很好的结合。   ...那有一个问题,indexContrl如何与index.html关联起来?Angular JS怎么知道我们要用indexContrl来控制index.html?   ...建议使用另外一种方式,就是用Angular JS另一个Module ng-route,做路由控制,针对不同的路径,在同一个文件中定义好各自的控制器。...示例结果及小结   最后访问网站,可看到正确的结果,网站已被挂起,同时页面中的变量已被Angular JS控制器替换为正确数据。   ...这里讲一个小地方,最初试验时页面的变量怎么也不替换,花了很多个小时,换了Angular JS库,改变了控制器等写法,都没用。最后查资料和文档,才发现只有页面中有ng-view,才会起作用。

4.4K60

【Hybrid开发高级系列】AngularJS(一)——基础专题

/angular.js">         这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运 行后将会寻找含有...configFn: 模块的启动配置函数,在angular config阶段会调用该函数,对模块中的组件进行实例化对象实例之前的特定配置,如我们常见的对$routeProvider配置应用程序的路由信息。...指令触发 includeContentRequested(emit事件)         调用ngInclude的作用域上发送,每次ngInclude的内容被请求的时候,都会发布该事件 viewContentLoaded...另一个非常需要注意的是,在上面的代码里面,当调用Phone服务的方法是我们并没有传递任何回调函数。...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

41280

现代web开发方法

以下是最流行的基于JavaScript的单页面应用程序(SPA)框架 Angular.js - 连接到静态HTML的客户端库,具有一组用于数据绑定的属性 ReactJS - 用于构建Web应用程序的基于组件的客户端库...Vue.js - 提供双向数据绑定(也可以在AngularJS中看到)和服务器端渲染,如Angular 2和ReactJS Ember.js - 客户端库使用Handlebars模板引擎来构建Web应用程序...其中使用Blaze,Angular和React进行模板化 ? 2017年5个最佳JavaScript框架 单页应用程序在内容,逻辑控制器和演示文稿之间创建了界限。...,组合模式,策略模式等设计模式的组合应用下的产物,此刻论原生js的重要性..哈哈 一个服务器端的例子 这个例子展示了我们如何获取和渲染不同级别的用户列表 让我们获取用户的服务器端控制器开始,以JSON...{{ each users }} {{> user }} {{ end }} 浏览器最初呈现模板时,会调用控制器以获取用户的模板

2.2K10

angularJS学习之路(三)---控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。.../js/angular.min.js" > var app = angular.module('myApp', []); app.controller...ng-controller="myCtrl"  用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。...上面的例子中: 控制器在作用域中创建了两个属性 (firstName 和 lastName)。 ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。...PS:控制器  只负责  数据模型向视图模型传递信息(数据) 和 设置事件监听器          不做DOM操作 和 数据操作  以及对象状态操作 控制器其实 可以 理解为一个类结构,有变量有方法

60930

Angular2:AngularJS 1.x 中学到的经验

另一个值得注意的反模式就是:在不同的控制器中重复实现相同的业务逻辑。开发者倾向于拷贝粘贴这些逻辑,而实际上这些东西应该封装到service 里面去。...以上就是我们AngularJS 1.x 中所学习到的内容。这样看来,似乎控制器的功能应该移到指令内部的控制器中去。...在《迈向Angular2》第4 章,将会学习如何Angular 2中的组件和指令来取代AngularJS1.x 中控制器的功能。...在《迈向Angular2》第8 章,我们将会深入学习这款工具。 大规模应用 自从Backbone.js 出现之后 ,MVW 就是构建单页应用的标配。...TypeScript 1.6 版开始,已经实现了ECMAScript 2016 装饰器,它是Angular 2 的完美选择。

2.7K10
领券