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

Мой вопрос включает в себя использование AngularJS directives в шаблоне внутри ngView в приложении AngularJS.вызов шаблона внутри ngView не поддерживает угловую дирекцию stackoverflow

Определение:
Приложение одной страницы, поэтому он загружает файл index.html, содержащий Div элемент (шаблон URL) в DOM с атрибутом нг ракурса.

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' 
    }); 
    })

page1.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>

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

источник

2015-05-18 Rohit Jindal

@MikkoViitala, могли бы вы мне помочь в более продуманном вашем комментарии. –

Да, разместите JS-код вашего Page1Ctrl. –

Не видя код для вашего 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>

источник

2015-05-18 06:37:38

Спасибо .. Я ищу его .. :) –

Когда вы нажимаете на <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}})

источник

2015-05-18 06:03:06 vs4vijay

Спасибо за этот ответ, я попытаюсь реализовать его таким образом. Есть ли необходимость называть скрипт 'angularJS.min' в page1.html? как он уже вызывается на главной странице (index.html) –

№. В SPA только точка входа (index.html) содержит библиотеку js (угловой, загрузочный и т. д.) и css-файлы. Другие htmls - это просто шаблоны или частичные элементы, которые вводятся в '' с помощью вызова ajax.Поэтому вам не нужно включать 'angular.min.js' (или любые другие js) в' page1.html'. – vs4vijay

Хорошо. Спасибо за это .. :) –

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

ответ

Смежные вопросы