angular.min.js не включается для отображения частичного HTML в поле зрения.

У меня есть SPA.html [одностраничное приложение].

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
        <script src="angular.min.js"></script>
        <script src = "angular-route.js"> </script>
        <script>
                (function () {
                var demoApp = angular.module('demoApp',['ngRoute']);
                    demoApp.config(['$routeProvider', function ($routeProvider) {
                                $routeProvider
                                        .when('/index',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/index.html'
                                        })
                                        .when('/fixed',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/fixed.html'
                                        })
                                        .when('/calculated',
                                        {
                                        controller : 'SimpleController',
                                        templateUrl : 'Partials/calculated.html'
                                        })
                                        .otherwise({redirectTo : '/index'});
                                        }]);
                }());
        </script>

</head>
<body>
Click : <input ng-model="name"/> {{name}}

        <a href="#/index">index </a>
        <a href="#/fixed">fixed </a>
        <a href="#/calculated">calculated </a>
        <br />
        Placeholder
        <div ng-view></div>
</body>
</html>

При нажатии на любую из ссылок в поле зрения загружается частичный HTML-код. Скажем, мой index.html в частичной папке:

<script src="angular.min.js"> </script>
<div ng-app="">
<div class="container" >
                <input type="text" ng-model="name" />
                Label: : {{name}} <br>
</div>
</div>

Итак, щелчок по индексу загружает вышеуказанный фрагмент, но вместо привязки данных я получаю {{name}} на веб-странице, но когда я напрямую открываю index.html, он работает нормально.

Что мне не хватает? Я скопировал angular.min.js в Partials.


html angularjs single-page-application partial-views
person surbhi bakshi    schedule 18.09.2015    source источник
comment
У шаблонов не должно быть собственного ng-app и не нужно повторно включать angular.js; они должны содержать только html, который вы хотите ввести в узел директивы (в данном случае ng-view).   -  person Daniel Beck    schedule 18.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я создал пример Plnkr, чтобы продемонстрировать, как этого добиться.

http://plnkr.co/edit/yn7fhx6p1DU99ILb8mSg

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

    <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');      </script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
    </head>

   <body ng-controller="MainCtrl">

     <a href="#/resolveView">Resolve View</a>

   <div ng-view></div>

 </body>
</html>

Js 

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

  /*
  angular.module('controllers', [])
    .controller('myCtrl', [function($scope, resolvedVal) { $scope.answer = resolvedVal; }]);
  */

  app.config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/resolveView', {
          templateUrl: 'resolveView.html',
          controller: 'MainCtrl'
        }
      );
   }]);

app.controller('MainCtrl', function($scope, $location) {
   $scope.name = "Hello World";
 });
person cullimorer    schedule 18.09.2015
comment
Привет! Благодарю. Вы можете помочь мне в другом? Как и у меня 2 частичных элемента, у одного есть текстовое поле, а другой хочет отобразить ввод в этом текстовом поле. Как мне этого добиться? $ CookieStore или другим способом? Кроме того, если я перемещаюсь между частичными объектами, я хочу, чтобы ввод в текстовое поле оставался неизменным. Как это сделать? - person surbhi bakshi; 21.09.2015
comment
Не стоит беспокоиться. Есть несколько способов добиться этого, но лично я хотел бы, чтобы они совместно использовали контроллер и тем самым разделяли их область действия, что означает, что вы можете получить доступ к модели как в родительском, так и в частичном представлении. Вот Plnkr: embed.plnkr.co/yn7fhx6p1DU99ILb8mSg/preview - person cullimorer; 21.09.2015
comment
ну, это работает между родительским и частичным. Я хочу, чтобы он работал между двумя частями. Если вы перейдете к созданному вами примеру, я добавил еще один фрагмент с именем preview.html, в котором есть текстовое поле «привет». Я хочу отобразить "привет" в другом частичном файле resolveView.html. Поскольку я новичок в Plunker, я не уверен, отражаются ли мои изменения на вас или нет. - person surbhi bakshi; 21.09.2015
comment
К сожалению, Plunker работает не так :), теперь я обновил свой plunker, чтобы использовать ту же модель, что и другой. plnkr.co/edit/yn7fhx6p1DU99ILb8mSg?p=preview - person cullimorer; 21.09.2015
comment
вы не совсем понимаете мои сомнения: обе части имеют ‹p› View 2: {{name}} ‹/p› в вашем коде, а родительский элемент имеет ‹input ng-model = name /›. Я хочу, чтобы одна из частей имела ‹input ng-model = name /›, а другая - {{name}}. И когда я перемещаюсь между частями, я вижу значение имени с привязкой к данным во второй части. - person surbhi bakshi; 21.09.2015
comment
О, хорошо, теперь я понимаю, что ты имеешь в виду. Контроллеры удаляются при изменении маршрута. Angular не предназначен для передачи данных между представлениями, вместо этого мы используем Services / Factories, чтобы справиться с этим. На этот вопрос о стеке есть хороший ответ: stackoverflow.com/questions/16210822/. В противном случае может помочь обновленный Punker: plnkr.co/edit/yn7fhx6p1DU99ILb8mSg?p= а> - person cullimorer; 22.09.2015