个人中心
gpt4 book ai didi

angularjs - 使用通过模块定义的多个 Controller 不起作用

转载 作者：行者123 更新时间：2023-12-04 13:14:01 25 4
gpt4 key购买 nike

将 Controller 定义为全局函数时，一切正常。但是当使用模块来声明和“分配” Controller 时，只有第一个 Controller 用于解析绑定(bind)。我错过了什么？

<!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>

最佳答案

@Arun 是正确的。但是，在您的情况下，我猜您并不想两次引导 Angular，而只是使用在不同模块中定义的 Controller 。

这通常是通过拥有一个依赖于所有所需模块的页面/站点模块来完成的，在您的情况下为 flintstones和 rumbles .

angular.module('flintstones', []).controller('flintstoneCtrl', ...);
angular.module('rumbles', []).controller('rumbleCtrl', ...);

// Create a module with dependencies.
angular.module('myApp', ['flintstones', 'rumbles'])...

在您的 html 中，您只需使用 ng-app="myApp"并且该模块的内容及其所有依赖项都可以访问。 
<html ng-app="myApp">
  <body>
    <div ng-controller="flintstoneCtrl">...</div>
    <div ng-controller="rumbleCtrl">...</div>
  </body>
</html>

关于angularjs - 使用通过模块定义的多个 Controller 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16080113/

25 4 0
文章推荐： r - 为什么在带有 xts/zoo 的 R 中没有 apply.hourly？
文章推荐： sql - VBA 和 Oracle SQL : ORA-00907: Missing Right Parenthesis
文章推荐： symfony - 如何从Symfony2/Silex项目生成翻译文件(.po，.xliff，.yml等)？
文章推荐： text - D3、SVG 和 textPath : How to move the text down?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com