17

我问了这个问题，但我问的具体问题发生了巨大变化。

我有一段代码：

  <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
    <h1 ng-click="pings.press()">asdf</h1>
  </div>

这段代码被注入到两个 html 页面中。一页已经调用PingsCtrl。另一个没有。我真的很想保持这段代码干燥，我只想有一个上面代码的参考。

ng-controller如果PingsCtrl尚未实例化，我如何编写上面的代码来生成。

这是两个html页面。

HTML

// First page
<html ng-app="coolApp">
  <div ng-controller="PingsCtrl as pings">
    <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
      <h1 ng-click="pings.press()">asdf</h1>
    </div>
  </div>
</html>

// Second page
<html ng-app="coolApp">
  <div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}">
    <h1 ng-click="pings.press()">asdf</h1>
  </div>
</html>

Javascript在这里：

angular.module('coolApp', [])

.controller('PingsCtrl', function() {
  var vm = this;

  vm.press = function() {alert(123)};
})

出了什么问题，我该如何解决？

4

3 回答 3

7

只需使用服务。它确实是在页面之间具有公共数据和功能的预期结构。

您尝试的部分问题是，无论您是否设法保留控制器，Angular 都有自己的管理，不会跟随您，并且会在没有您的情况下刷新组件。您会遇到$scope与您正在查看的页面不匹配的问题，最终导致的问题多于其价值。

于 2015-12-30T20:07:58.177 回答
3

我确实有一个解决方案，但我也回应了其他人对该方法的担忧。您可能希望拥有一个全局控制器，将其放在主体上，以处理可能在任何地方和大多数其他控制器中发生的事情，然后通过它调用。例如

<body ng-controller="GlobalCtrl as gc">
    <h1 ng-click="gc.pingPress()"></h1>
</body>

无论如何，这就是我想出的。

<div ng-if="pings">
    <h1 ng-click="pings.press()">asdf</h1>
</div>
<div ng-if="!pings">
    <div ng-controller="PingsCtrl as pings">
        <h1 ng-click="pings.press()">asdf</h1>
    </div>
</div>

如果将它放在现有 PingsCtrl 内部或外部，这将起作用。

这是一个笨蛋。

https://plnkr.co/edit/4x0kSazcg0g0BsqPKN9C?p=preview

于 2016-01-02T13:40:06.950 回答
1

请检查我的解决方案以了解如何在控制器之间共享数据

var app = angular.module('myApp', []);

app.controller("aCtrl", function ($scope, PingList) {
  $scope.addPing = function() {
    PingList.add('Ping A');
  };
});

app.controller("bCtrl", function ($scope, PingList) {
  $scope.addPing = function() {
    PingList.add('Ping B');
  };
});

app.factory('PingList', function () {
  var pings = ['Ping1', 'Ping2'];

  return {
    add: function(ping) {
      pings.push(ping);
    },
    get: function () {
      return pings;
    }
  };
});

app.directive('pingList', function(PingList) {
  return {
    restrict: 'EA',
    link: function($scope) {
      $scope.pings = PingList.get();
      $scope.press = function(ping) {
        alert(ping);
      }
    },
    template: '<ul><li ng-repeat="ping in pings" ng-click="press(ping)">{{ping}}</li></ul>'
  };
});
a, li {
  cursor: pointer;
}

a {
  color: blue;
  text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="aCtrl" style="float: left">
    <a ng-click="addPing()">click to add A ping</a>
    <ping-list></ping-list>
  </div>
  <div ng-controller="bCtrl" style="float: right">
    <a ng-click="addPing()">click to add B ping</a>
    <ping-list></ping-list>
  </div>
  <div style="clear: both"></div>
</div>

于 2016-01-03T08:18:26.453 回答