Несколько экземпляров представления с использованием AngularJS и ui-router - PullRequest
Новая
       6

Несколько экземпляров представления с использованием AngularJS и ui-router

0 голосов
/ 05 октября 2018

Мы пытаемся создать приложение SPA, в котором одно и то же представление может отображаться более одного раза, но каждое представление должно поддерживать свое собственное состояние.У нас есть кнопка «Сохранить» на главной странице.Когда эта кнопка нажата, она должна вызвать функцию Save () контроллера активного представления.

Проблема, с которой мы сталкиваемся, заключается в том, что, поскольку один и тот же вид открывается (скажем) 3 раза, функция Save ()из всех трех представлений вызывается - вместо функции Save () только того представления, которое в данный момент активно.

Я считаю, что предоставление псевдонима контроллеру и вызов функции Save () дляпсевдоним текущего активного представления.Однако мы почему-то не можем заставить его работать.

Подмножество нашего кода доступно ниже или здесь .

index.html 

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="Ctrl1">
        <h4>Parent Controller</h4>
        <input type="button" value="Call Save of Child from Parent" ng-click="c2.Save()" />

        <div ng-controller="Ctrl2 as c2">
            <h4>Child Controller</h4>
            <table>
                <tr>
                    <td>First Name</td>
                    <td> <input type="text" ng-model="FirstName" /></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td> <input type="text" ng-model="LastName" /></td>
                </tr>
            </table>
            <input type="button" value="Save" ng-click="c2.Save()" />
        </div>
    </div>   
</body>
</html>

script.js 

var app = angular.module('myApp', []);
app.controller("Ctrl1", ['$scope', function ($scope) {

}]);
app.controller("Ctrl2", ['$scope', function ($scope) {
    this.Save = function () {
        debugger;
        alert("First Name: " + $scope.FirstName + '\n' + "Last Name: " + $scope.LastName);
    };
}]);

Обратите внимание, что этот код предназначен только дляодин экземпляр контроллера.В реальности у нас будет несколько экземпляров одного и того же контроллера (одно и то же представление можно открывать несколько раз, а также поддерживать его состояние).

Заранее спасибо.

...