通过使用模块中定义多个控制器不工作 [英] Using multiple controllers defined via module does not work

查看:152
本文介绍了通过使用模块中定义多个控制器不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在定义控制器为全局的功能,一切工作正常。但是,使用模块来声明和分配控制器时,只有第一个控制器用来解析绑定。我想什么?

 <!DOCTYPE HTML>
< HTML和GT;
<头/>
<身体GT;
  < D​​IV NG-应用=摩登原始人>
    < D​​IV NG控制器=flintstoneCtrl>
      <标签>名称:LT; /标签>
      <输入类型=文本NG模型=YOURNAME占位符=在此处输入名称>
      <小时>
      < H1>您好{{YOURNAME}}<!/ H1>
    < / DIV>
  < / DIV>
  < D​​IV NG-应用=隆隆>
    < D​​IV NG控制器=rumbleCtrl>
      <标签>名称:LT; /标签>
      <输入类型=文本NG模型=YOURNAME占位符=在此处输入名称>
      <小时>
      < H1>您好{{YOURNAME}}<!/ H1>
    < / DIV>
  < / DIV>
< /身体GT;&所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js>&下; /脚本>
<脚本>  VAR摩登原始人= angular.module(摩登原始人,[]);
  flintstones.controller(flintstoneCtrl功能flintstoneCtrl($范围){
    $ scope.yourName =弗雷德
  });  VAR隆隆= angular.module(隆隆,[]);
  rumbles.controller(rumbleCtrl功能rumbleCtrl($范围){
    $ scope.yourName =巴尼;
  });< / SCRIPT>< / HTML>


解决方案

我想,一个页面只能有一个 NG-应用作为默认值,你的情况,你有两个 NG-应用定义。

<一个href=\"http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page\">If您有多个应用程序在一个页面中,您需要做的手工引导

When defining controllers as global functions, everything works fine. But when using the modules to declare and "assign" the controllers, only the first controller is used to resolve the bindings. What am i missing?

<!doctype html>
<html>
<head/>
<body>
  <div ng-app="flintstones">
    <div ng-controller="flintstoneCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
  <div ng-app="rumbles">
    <div ng-controller="rumbleCtrl">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>

  var flintstones = angular.module("flintstones", []);
  flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) {
    $scope.yourName = "Fred";
  });

  var rumbles = angular.module("rumbles", []);
  rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) {
    $scope.yourName = "Barney";
  });

</script>

</html>

解决方案

I think, one page can have only one ng-app as default, in your case you have two ng-app definitions.

If you have multiple apps in a page you have to do manual bootstrapping

这篇关于通过使用模块中定义多个控制器不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆