Не могу обмениваться данными между контроллерами 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 путем привязки данных к выражению, которое представляет все классы, которые будут добавлены. Больше информации о нг-классе

Другие вопросы по тегам