Question

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

我有一段代码：

[WebService(Namespace = PublicServices.XmlnsNamespace)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
public class PublicServices : WebService
{
    public const string XmlnsNamespace = "http://xmlns.domain.com/publicapi";

    [WebMethod]
    public ProgramData GetProgramData(string userName, string password, string programCode)
    {
        // Gather and return program data here
    }
}

此代码注入两个html页面。一个页面已调用<div ng-attr-controller="{{pings || 'PingsCtrl as pings' }}"> <h1 ng-click="pings.press()">asdf</h1> </div>。另一个没有。我真的试图将此代码保留为DRY，我只希望对上面的代码有一个参考。

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

以下是两个html页面。

HTML

PingsCtrl

Javascript在这里：

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

出了什么问题，如何解决这个问题？

Answer 1

只需使用服务即可。它确实是在页面之间拥有通用数据和功能的预期结构。

您尝试的问题的一部分问题是，无论您是否设法保留控制器，Angular都有自己的管理层，无法跟随您，并且无需您就可以刷新组件。您会遇到$scope之类的内容，而这些内容与您正在查看的网页实际上并不匹配，最终会导致更多问题，而不是它的价值。

Answer 2

我确实有一个解决方案，但我也回应其他人对该方法的担忧。您可能希望拥有一个全局控制器，您可以将其放在身体上，以便在任何地方和大多数其他控制器中发生这些事情，并且只需通过它进行调用。例如

<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

Answer 3

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

＆＃13;

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>'
  };
});

＆＃13;

a, li {
  cursor: pointer;
}

a {
  color: blue;
  text-decoration: underline;
}

＆＃13;

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

＆＃13;

如何基于条件实例化ng-controller

3 个答案: