ng-include scope scope

У меня проблема с AnguleJs при использовании ng-include для включения html-шаблона с собственным контроллером.ng-include scope scope

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

Это моя страница index.html, в которой я включаю test.html шаблон:

<html ng-app="myApp"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="app.js"></script> 

    <body> 
    <div ng-controller="TestController" ng-include="'test.html'"></div> 
    </body> 
</html>

Вот шаблон test.html:

<div> 
{{foo}} 
<br /> 
<input type="text" ng-model="username" />{{username}} 
<br /> 
<button ng-click="go()">Click here</button> 
</div>

И, наконец, это мой контроллер:

myApp.controller('TestController', function($scope) { 
    $scope.foo = 'Hello World'; 
    $scope.go = function() { 
    console.log('Username = ' + $scope.username); 
    } 
});

без проблем можно сделать следующее:

Доступ Foo, который определен в контроллере в шаблоне
Доступ к имени пользователя, который определен в шаблоне в шаблоне сам

Но я не могу сделать следующее

Доступ к имени пользователя, которое определено в шаблоне в контроллере (выход не определен в функции go())

Адрес plunker.

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

источник

2015-05-20 Ahmed Abdullah Hussein

Возможный дубликат [AngularJS: dot in ng-model] (http://stackoverflow.com/questions/17606936/angularjs-dot-in-ng-model) – charlietfl

Я уже прочитал это, и я думаю, что мой случай отличается. Я попытался использовать ** info.username ** как имя для модели, но это тоже не сработало. –

Хорошо, что я предлагаю вам сделать, это псевдоним вашего контроллера и вставить модель в ее объем.

Алиас контроллер:

<div ng-controller="TestController as testCtrl" ng-include="'test.html'"></div>

На самом деле этот код позволяет использовать testCtrl префикс переменные и isert их в объеме.

INSER модель в области контроллера:
Итак, теперь вы можете вставить вашу модель в объеме.

<input type="text" ng-model="testCtrl.username" />{{testCtrl.username}}

Так что теперь в вашем контроллере вы можете получить доступ к этой переменной, как, что:

$scope.testCtrl.username

источник

2015-05-20 00:43:00 borracciaBlu

Его, потому что ng-include директива создает новый контекст всегда, когда он включен,

вместо того, чтобы объявить контроллер в

<div ng-controller="TestController" ng-include="'test.html'"></div>

объявят его в самом test.html,

<div ng-controller="TestController"> 
{{foo}} <br /> 
<input type="text" ng-model="username"/> {{username}}  <br /> 
<button ng-click="go()">Click here</button> 
</div>

Надеется, что это помогает!

источник

2015-05-20 03:33:18

В чем проблема с созданием новой области? Я имею в виду, почему мне приходится сталкиваться с вышеуказанной проблемой (доступ к области видимости в представлении, но не наоборот) –

Его потому, что 'ng-include' создает новую дочернюю область, которая унаследована от области TestController или ее родительской области, недоступный для родительской области. –

А я вижу! Первый запуск 'ng-controller' ([приоритет 500] (https://docs.angularjs.org/api/ng/directive/ngController)), создание новой области, * затем *' ng-include' работает ([приоритет 400] (https://docs.angularjs.org/api/ng/directive/ngInclude)), создавая еще одну дочернюю область. Контроллер имеет доступ только к родительской области. Brilliant! – Claudiu

ng-include scope scope

ответ

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