привязка не работает во вложенном контроллере

Я новичок в Angular JS.привязка не работает во вложенном контроллере

У меня есть несколько вопросов. Сфера видимости работает с моим первым контроллером testController, но не с моим вторым контроллером controlspicy.

Почему не позволяет распечатать $scope.greeting? Не следует привязывать работу, потому что я назначил контроллер.

Ссылка на plunkr, которая направляет прямо на код.

http://plnkr.co/edit/NbED8vXNiZCqBjobrISa?p=preview

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

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src="spicy.js"></script> 
    </head> 

    <body ng-controller="testController"> 
    <h1>Hello Plunker! {{message}}</h1> 
    <input type="text" name="firstName" ng-model="thetext"> 
    {{double(thetext)}} 
    <h1 ng-controller="controlspicy">new test</h1> 
    <h2>{{greeting}}</h2> 

    </body> 

</html>

script.js

var app = angular.module("newtest", []) 
    .controller("testController", ["$scope", function($scope) { 

     $scope.message = "hola"; 

     $scope.double = function(value){ 
     if (value == null){ 
      return 0; 
     } 
     return value*2; 
     }; 

    }]);

spicy.js

вар заявл = angular.module ("thespicy", []) .controller ("controlspicy" , ["$ scope", function ($ scope) {

$scope.greeting = "hello"; 

}]);

источник

2015-07-12 magna_nz

Другие ответы, похоже, доходят до сути, почему ваш конкретный вопрос не работает, но вы, вероятно, столкнетесь с другими проблемами при использовании вложенных контроллеров при использовании примитивов в '$ scope' из-за наследования прототипа JavaScript. см. http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs и всегда старайтесь следовать «правилу точки», – Claies

Как уже упоминалось в Престоне, вы должны обернуть <h2> внутри тега ng-controller. Однако есть еще одна проблема. controlpicy определен в другом модуле, чем тот, который вы указываете в ng-приложении. Изменить angular.module("thespicy", []) in spicy.js to angular.module("newtest").

Вы почти никогда не должны использовать более одного модуля в одном приложении. Однако вы можете разделить его на разные подмодули, но если ваш новый для Angular я бы рекомендовал использовать только один модуль для начала.

уточнить; вы должны только определить модуль один раз, набрав angular.module("module_name", []). Обратите внимание на []. В этом массиве вы должны были бы устанавливать зависимости для модуля (если бы вы действительно хотели использовать модуль «thespicy», вы могли бы включить его в зависимость от angular.module("newtest", ['thespicy']).Если вам потом захотелось добавить контроллер в модуль, вы должны ссылаться на модуль с angular.module("module_name") (нет []).Например:

// Define a module 
angular.module('foo', []); 

// Reference the previously defined module 'foo' 
angular.module('foo') 
.controller('barCtrl', function() { ... });

Вот рабочая вилка вашего примера: http://plnkr.co/edit/rtUJGeD52ZoatoL3JgwY?p=preview кстати.

источник

2015-07-12 01:55:36 Scraph

Вложенный контроллер контролирует только область тега. В этом случае он имеет доступ только к области внутри тега h1. Попробуйте это:

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

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src="spicy.js"></script> 
    </head> 

    <body ng-controller="testController"> 
    <h1>Hello Plunker! {{message}}</h1> 
    <input type="text" name="firstName" ng-model="thetext"> 
    {{double(thetext)}} 
    <div ng-controller="controlspicy"> 
     <h1>new test</h1> 
     <h2>{{greeting}}</h2> 
    </div> 

    </body> 

</html>

Вот рабочий plunker вашего примера: http://plnkr.co/edit/gufbBI4i68MGu8FWVfJv?p=preview

Я должен отметить, что вы не включили ваш контроллер в вашем главном приложении.

script.js должны начать так:

var app = angular.module("newtest", ['thespicy'])

источник

2015-07-12 01:48:05

Вы несколько приложений

проверки этого plunkr для рабочих вложенных контроллеров

<div> 
    <div ng-controller="testController"> 
    <h1>Hello Plunker! {{message}}</h1> 
    <input type="text" name="firstName" ng-model="thetext"> 
    {{double(thetext)}} 
    </div> 
    <div ng-controller="thespicy">new test 
    <h2>{{greeting}}</h2> 
    </div> 
</div>

script.js

var app = angular.module("newtest", []) 
    .controller("testController", ["$scope", function($scope) { 

     $scope.message = "hola"; 

     $scope.double = function(value){ 
     if (value == null){ 
      return 0; 
     } 
     return value*2; 
     }; 

    }]) 

    .controller('thespicy', ["$scope", function($scope) { 
     $scope.greeting = "Hello"; 
    }])

источник

2015-07-12 01:54:32 user2954587

привязка не работает во вложенном контроллере

ответ

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