Question

我一直在这里关注几个例子，但是没有看到相同的结果。我有两个控制器，一个用于下拉，一个用于表。当用户从下拉列表中选择一个项目时，工厂开始并运行get。目的是让它更新表数据源。 get运行并成功更新IB变量。但是，表源不会更新。贝娄是我的HTML和js

App.js：https://gist.github.com/fce53552ebc0ca8cdae68511a7cedc38 index.html：https://gist.github.com/3077b367bdf16e3e18e603fb93f37729

我非常感谢任何关于我做错事的帮助;）

Answer 1

我的猜测是，如果要在它们之间共享数据，您只想使用一个控制器。这是一个有效的演示（出于某种原因，虽然它在我的浏览器中有效，但它不适用于小提琴）。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="ctrl.js"></script>
  </head>
  <body>
    <div ng-app="app" ng-controller="moviesCtrl">
      <h1>Movies By My Favorite Directors</h1>
      <select ng-model="director">
        <option ng-repeat="director in directors" value="{{ director.id }}">{{ director.name }}</option>
      </select>
      <table>
        <tr>
          <td>Movie Title</td>
          <td>Lead Actor</td>
        </tr>
        <tr ng-repeat="film in movies[director].films">
          <td>{{ film.title }}</td>
          <td>{{ film.lead }}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

ctrl.js

angular.module('app', []).controller('moviesCtrl', function($scope) {
  $scope.directors = [
    {
      id: 0,
      name: "Stanley Kubrick"
    },
    {
      id: 1,
      name: "Quentin Tarantino"
    }
  ];
  $scope.movies = [
    {
      directorId: 0,
      films: [
        {
          title: "The Shining",
          lead: "Jack Nicholson"
        },
        {
          title: "A Clockwork Orange",
          lead: "Malcolm McDowell"
        },
        {
          title: "2001: A Space Odyssey",
          lead: "Keir Dullea"
        }
      ]
    },
    {
      directorId: 1,
      films: [
        {
          title: "Pulp Fiction",
          lead: "John Travolta"
        },
        {
          title: "Inglorious Buddies",
          lead: "Brad Pitt"
        },
        {
          title: "Django Unchained",
          lead: "Jamie Foxx"
        }
      ]
    },
  ];
});

注意：directorId字段用作一种评论，用于了解哪个导演对应于哪些电影。它在代码中没有任何价值。

Answer 2

（plunkr）

所以这可能比你要求的要多，但鉴于这是一个共同的主题，特别是对于初学者，我认为我会提供一个简化的响应（许多变体之一）。我不打算让这是一个冗长的教程，而只是一个总结。目的是指出你正确的方向，并敦促你独立去做。该解决方案侧重于使用Angular指令，这是Angular 1.X中提供的强大模式（在AJS 2.X中进一步发展）。在这个例子中，我有2个指令' cf-get-data-button '和' cf-show-data '，其中前者的行为类似于 drop-向下选择（getData（）），后者充当您的表，其内容会因此而更新（模拟为最新的UTC时间）。我还使用了两个更重要的模式：1。一个'工厂'模式，其中实现了一个单独的服务，你的ajax API驻留并“注入”指令，从而可用于它们和2.从ajax调用返回的异步promise ，你在你的问题中间接触及的两个。我也不会详细介绍那些，所以你现在可以忽略，但如果你还没有这样做，我建议你去看看。请注意，在此示例中，模拟的AJAX调用（$ timeout）的结果仅在返回promise后才可用。

最后，您的“页面”需要一个外部控制器，通常与AJS的准MVC世界视图保持一致。但是，每个指令都提供了自己的“控制器”，它与您正在寻找的关注点的组件化和分离保持一致。该服务（作为单例）充当数据的“关键”，因此，由于两个指令都可以访问它（通过注入），它们可以请求和/或使用该数据，即模拟下拉指令要求data和模拟表指令显示它（再次显示UTC时间）。注意，指令可以通过各种方式进行自定义，而我所包含的指令则是最简单的指令。

你可以从index.html开始（下面 - 注意正文中的2个指令和链接的js脚本）并从那里获取它。我在js和html文件中添加了注释，BTW。如果您有任何疑问，请随时询问。

<!DOCTYPE html>
<html ng-app="Tutorial">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>

    <script src=app.js></script>  
    <script src=mock_ajax_service.js></script>
    <script src=getdatabuttondirective.js></script>  
    <script src=showdatadirective.js></script>
  </head>

  <body ng-controller="TutorialController">
    <p>One UI directive triggers update on another UI directive</p>

    <cf-get-data-button></cf-get-data-button>
    <br>
    <cf-show-data></cf-show-data>
  </body>

</html>

AngularJS：一个控制器中的事件更新不同控制器中的值

2 个答案:

的index.html

ctrl.js