Как создать экземпляр ng-контроллера на основе условия

Я задал этот вопрос, но конкретный вопрос, который я задаю, резко изменился.

У меня есть код:

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

Этот код вводится на две html-страницы. Одна страница уже вызывает PingsCtrl. Другой - нет. Я действительно пытаюсь сохранить этот код DRY, и я хочу только иметь одну ссылку на код выше.

Как написать код выше для генерации 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)};
})

Что не так и как это исправить?

Ответ 1

Просто используйте услугу. Это действительно предназначенная структура для обеспечения общих данных и функциональности между страницами.

Частично проблема с тем, что вы пытаетесь, заключается в том, сохраните или не сохраните контроллер, Angular имеет собственное управление, которое не будет следовать за вами, и будет обновлять компоненты без вас. Вы столкнетесь с такими вещами, как $scope, который фактически не соответствует странице, на которую вы смотрите, и в итоге она вызывает больше проблем, чем это стоит.

Ответ 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

Ответ 3

Пожалуйста, проверьте мое решение, чтобы узнать, как обмениваться данными между контроллерами.

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>