вызов шаблона внутри ngView не поддерживает угловую директиву stackoverflow

Мой вопрос касается того, как использовать AngularJS directives в шаблоне, вызываемом внутри ngView в приложении AngularJS.

Define :
Приложение является одностраничным, поэтому оно загружает index.html, который содержит элемент div (URL-адрес шаблона) в DOM с атрибутом ng-view.

Main Page(index.html) :

<html data-ng-app="App" data-ng-controller="AppCtrl">
  <head>
    <title>Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="js/app.js"></script> 
  </head>
<body>
<!-- primary nav -->
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/page3">Page 3</a>

<!-- display the view -->
<div ng-view>
</div>
</body>
</html>

app.js:

angular.module('App', [])

.controller('AppCtrl', function($rootScope, appLoading) {
    $rootScope.topScope = $rootScope;
    $rootScope.$on('$routeChangeStart', function() {
      appLoading.loading();
    });
  })

.config(function($routeProvider) {
    $routeProvider.when('/page1', {
      controller : 'Page1Ctrl',
      templateUrl : 'page1.html'
    })
    .when('/page2', {
      controller : 'Page2Ctrl',
      templateUrl : 'page2.html'
    })
    .when('/page3', {
      controller : 'Page3Ctrl',
      templateUrl : 'page3.html'
    })
    .otherwise({
      redirectTo: '/home'
    });
  })

страница1.html :

<div class="form">
<form class="login-profile" method="post" action="" name="editfrm">
<input type="text" name="email" value="" id="txtemail" data-ng-model="email" required>
<input type="password" name="password" value="" id="txtpassword" data-ng-model="password" required>
<input type="button" value="Save" name="submit">
</form>
</div>

Проблема: URL-адрес шаблона, вызываемый внутри ngView, не поддерживает AngularJS deirective. data-ng-model="email" и data-ng-model="password" не работают при вызове в ngView при нажатии на ссылку <a href="#/page1">Page 1</a>

Любая помощь будет оценена. Спасибо


javascript angularjs angularjs-directive ng-view
person Rohit Jindal    schedule 18.05.2015    source источник
comment
@MikkoViitala, не могли бы вы помочь мне уточнить ваш комментарий.   -  person Rohit Jindal    schedule 18.05.2015
comment
Да, опубликуйте JS-код вашего Page1Ctrl.   -  person Mikko Viitala    schedule 18.05.2015

Ответы (2)


arrow_upward
1
arrow_downward

Трудно сказать, не видя кода для вашего Page1Ctrl, но похоже, что вы пытаетесь обмениваться данными между контроллерами с помощью $rootScope, не так ли?

Ну, просто не надо. Используйте для этой цели либо $routeParams, либо сервис. Например:

// app controller   
.controller('AppCtrl', function(User) {
  User.set({email:'email', password:'password'}); // set user
})

// page 1 controller
.controller('Page1Ctrl', function($scope, User) {
  $scope.user = User.get(); // get user
})

// user service      
.service('User', function() {
  var user = null;
  return {
    get: function() {
      return user;
    },
    set: function(val) {
      user = val;
    }
  };
});

и соответствующий HTML

<input type="text" 
       name="email" 
       data-ng-model="user.email" 
       required>
<input type="password" 
       name="password" 
       data-ng-model="user.password" 
       required>
person Mikko Viitala    schedule 18.05.2015
comment
Спасибо..ищу..:) - person Rohit Jindal; 18.05.2015

arrow_upward
0
arrow_downward

Когда вы нажимаете на <a href="#/page1">Page 1</a>, загружаются Page1Ctrl и page1.html. Вы уверены, что не можете получить доступ к $scope.email и $scope.password в Page1Ctrl.

Он должен быть доступен, если нет, то попробуйте создать объект модели следующим образом:

$scope.LoginProfile = {
       email: '',
       password: ''
}

и используйте этот объект LoginProfile в своем page1.html, как этот LoginProfile.email и LoginProfile.password.

PS: попробуйте интерполировать html, чтобы вы могли просматривать значения (например, LoginProfile: {{LoginProfile}})

person vs4vijay    schedule 18.05.2015
comment
Спасибо за этот ответ, я попытаюсь реализовать его таким образом. Есть ли необходимость вызывать скрипт angularJS.min в page1.html? как это уже вызывается на главной странице (index.html) - person Rohit Jindal; 18.05.2015
comment
Нет. В SPA только точка входа (index.html) содержит библиотеку js (angular, bootstrap и т. д.) и файлы css. Другие html — это просто шаблоны или партиалы, которые внедряются в <ng-view> с помощью вызова ajax. Так что вам не нужно включать angular.min.js (или любые другие js) в page1.html. - person vs4vijay; 18.05.2015
comment
Хорошо..Спасибо за это..:) - person Rohit Jindal; 18.05.2015