Не могу обмениваться данными между контроллерами AngularJs
Привет, я новичок в AngularJS. Это мой файл index.html http://clip2net.com/s/3oknPG6
<!doctype html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular route</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
<script src="angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<div ng-view></div>
<script src="js/main.js"></script>
</body>
</html>
Это файл app.js:
angular.module("app", ["ui.router"])
.config(function config($stateProvider){
$stateProvider.state("index", {
url:"",
controller: "FirstCtrl as first",
templateUrl: "templates/first.html"
})
})
.controller("FirstCtrl", function FirstCtrl(){
var first = this;
first.greeting = "First";
});
и файл first.html:
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">{{first.greeting}}</div>
Я не могу получить данные в представлении, пожалуйста, помогите мне решить эту проблему. Также я получаю эту ошибку: Невозможно прочитать свойство isDefined из неопределенного.
3 ответа
Вы дважды загружаете свою зависимость 'ui-router' в ваш index.html. Может в этом проблема? Просто загрузите ваш пользовательский интерфейс маршрутизатора после того, как вы добавили angular.min.js.
Я считаю, что проблема с конфигурацией...
controller: "FirstCtrl as first"
Есть поле controllerAs, которое вы можете использовать. Попробуй это:
controller: "FirstCtrl"
controllerAs: "first"
Надеемся, что это должно исправить проблему вокруг isDefined из undefined. Angular будет буквально искать контроллер с именем "FirstCtrl как первый".
Надеюсь это поможет.
Что такое <script src="js/main.js"></script>
а также <script src="app/app.js"></script>
а также вы дважды загрузили ui-router, удалите <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
Также я не уверен, что вы пытаетесь достичь в вашем представлении файла first.html, написав
ng-class="first.greeting"
Директива ngClass позволяет динамически устанавливать классы CSS для элемента HTML путем привязки данных к выражению, которое представляет все классы, которые будут добавлены. Больше информации о нг-классе