2016-02-25 2 views
0

У меня возникли проблемы с объявлением 2 контроллеров в 1 приложении. Я предполагаю, что это синтаксическая ошибка, но не совсем уверенная.AngularJS Объявление нескольких контроллеров в 1 приложении

Сообщение об ошибке, которое я получаю, это то, что «люди не определены».

// это мое приложение файл

var myApp = angular.module('myApp',[]); 


myApp.config(function($interpolateProvider) { 
$interpolateProvider.startSymbol('{[{'); 
$interpolateProvider.endSymbol('}]}'); 
}); 



    myApp.controller('controller1', function($scope) { 

    var pets = [ 
    {animal: "dog", years: "3 Years"}, 
    {animal: "dog", years: "1 Years"}, 
    ];}); 


    myApp.controller('controller2', function($scope) { 


    var people = [ 
    {name: "john", bday: "september"}, 
    {name: "nancy",bday: "december"}, 
    ]; 
    }); 

На моей странице HTML, я просто пишу некоторые JavaScript, который пытается получить длину массива людей.

var totalpeople = people.length; 

Примечание: Не уверен, что это важная информация, но я объявляю свое приложение в теге html.

обновление: вот несколько базовых псевдокодов на моей странице html.

<html ng-app="myApp"> 
    <head> 
    <script> 
    var totalpeople = people.length; 
    </script> 
    </head> 
    <body> 
    <div ng-controler="controller1"> 
    <table><tr ng-repeat="rows in pets"> 
    <td>{[{pets.animal}]}</td><td>{[{pets.year}]}</td> 
    </tr> 
    </div> 
    <div ng-controler="controller2"> 
    <table><tr ng-repeat="rows in people"> 
    <td>{[{pets.name}]}</td><td>{[{pets.bday}]}</td> 
    </tr> 
    </div> 
    <div> 
    <table><tr> 
    <td><script>//not actually doing this, but totalpeople goes here </script></td> 
    </tr> 
    </div> 

    </body> 
+0

показать, где вы звоните 'people'. –

+0

вы также можете поделиться с вами html, если у вас есть плункер, это будет проще –

+0

Ваш фрагмент не совсем ясен, обеспечьте хорошее намерение. Кстати, вы не можете поместить запятую в последний элемент в массиве. – Hitmands

ответ

1

В html и в разделе сценария было много ошибок. Например, вы неправильно применили ng-controller к ng-controler. И логика ng-repeat не соответствует действительности. У вас отсутствуют теги для таблиц и многое другое. Я не знаю, почему вы хотели бы интерполировать {{}} на использование {[{}]}.

Здесь работает plunker: http://plnkr.co/edit/qs7mCrmElXGqGHdKAmNH?p=preview

<html> 
     <head> 
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> 
     </head> 
     <body ng-app="myApp"> 
     <div ng-controller="controller1"> 
      <table><tr ng-repeat="rows in pets"> 
      <td>{[{rows.animal}]}</td><td>{[{rows.years}]}</td> 
       </tr> 
       </table> 
       Total pets:{[{count}]} 
     </div> 
     <div ng-controller="controller2"> 
     <table><tr ng-repeat="rows in people"> 
     <td>{[{rows.name}]}</td><td>{[{rows.bday}]}</td> 
     </tr> 
     </table> 
     </div> 
     <br> 
        Total Pets: 
       <span id="show"></span> 
    <script> 
    var myApp = angular.module('myApp',[]); 


    myApp.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{[{'); 
    $interpolateProvider.endSymbol('}]}'); 
    }); 



     myApp.controller('controller1', function($scope) { 

     $scope.pets = [ 
     {animal: "dog", years: "3 Years"}, 
     {animal: "dog", years: "1 Years"} 
     ]; 
     $scope.count = $scope.pets.length; 
     document.getElementById('show').innerText=$scope.count;//use directive to achieve this,using jquery inside controller is bad practise. Used just for the purpose of demo. 
}); 


     myApp.controller('controller2', function($scope) { 
     $scope.people = [ 
     {name: "john", bday: "september"}, 
     {name: "nancy",bday: "december"}, 
     ]; 
     }); 
    </script> 
     </body> 
     </html> 
+0

@ Алекс Румба это имеет смысл. Извините за неаккуратный псевдокод, пытался что-то ускорить. Спасибо. Но как насчет моих pets.length? Я все еще хочу ссылаться на то, что в другом месте моего HTML дальше на моей странице. – user2828701

+0

Я обновлю свой плункер, жду его. –

+0

хорошо обновил плункер для подсчета. Это удовлетворяет ваши потребности? –

0

На моей странице HTML, я просто пишу некоторые JavaScript, который пытается получить длину массива людей.

Вы уверены, что вы ожидаете people быть доступны в глобальном масштабе (то есть свойство window объекта)?

Теперь давайте упростить код следующим образом:

function doStuff() { 
    var people = "whatever"; 
} 

doStuff(); 

// Is "people" variable available? 

Ответ нет, он не доступен, потому что это локальная переменная doStuff функции.

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

На самом деле, Угловой пытается избежать добавления мусора в глобальную область и вам нужно использовать встроенную привязку данных для отображения значений в пользовательском интерфейсе.

0

Зачем вам нужно писать javascript в вашем представлении, чтобы получить длину?

$scope.people = [ 
     {name: "john", bday: "september"}, 
     {name: "nancy",bday: "december"}, 
    ]; 

Можете ли вы просто сделать people.length на ваш взгляд.

Видя контекст, который вы пытаетесь назвать, это поможет.