2015-09-18 6 views
0

У меня есть SPA.html [Приложение с одной страницей].angular.min.js не включается для частичного 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> 

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

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

+0

Шаблоны не должны иметь свой собственный нг-приложение и не нужно повторно включить angular.js; они должны содержать только html, который вы хотите ввести в узел директивы (в данном случае ng-view). –

ответ

0

Я создал пример 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"; 
}); 
+0

Эй! Благодарю. Можете ли вы помочь мне с другим? Как и у меня 2 частичных, у одного есть текстовое поле, а другое - для отображения ввода в этом текстовом поле. Как я могу это достичь? По $ cookieStore или другому методу? Кроме того, если я перемещаюсь между частичными, я хочу, чтобы вход в текстовое поле оставался неповрежденным. Как это сделать? –

+0

Не беспокойтесь. Существует несколько способов добиться этого, но лично я бы хотел, чтобы они делили контроллер и тем самым делились своей областью, что означает, что вы можете получить доступ к модели как для родительского, так и для частичного просмотра. Вот Plnkr: http://embed.plnkr.co/yn7fhx6p1DU99ILb8mSg/preview – cullimorer

+0

ну, это работает между родителем и частичным. Я хочу, чтобы он работал между двумя частицами. если вы перейдете к примеру, созданному вами, я добавил еще одно частичное имя preview.html, у которого есть текстовое поле «привет». Я хочу показать «привет» в другом частичном файле resolView.html. Поскольку я новичок в plunker, я не уверен, отражают ли мои изменения для вас или нет. –