Вещи в контроллере не отображаются с помощью AngularJS

Question

Вещи в контроллере не отображаются с помощью AngularJS

0

Я пытаюсь показать silder, используя ng-repeat. Но картинки и другие вещи в контроллере не отображаются. Вот мой код js

angular.module('starter', [])
.controller('slider', function($scope) {
    $(document).ready(function(){
      $('.slider').slider({full_width: true});
    });
     $scope.pictures=[
  {
    img:"http://www.brics-info.org/wp-content/uploads/2015/08/Transmission-Lines.jpg,
    info:"Эрчим хүчний барилга угсралт",
    desc:"Засвар, тестчилэл"
  },
  {
    img:"http://www.burns-group.com/images/uploads/projects/Amtrak-Zoo-Transmission-Line-3.jpg",
    info:"Эрчим хүчний барилга угсралт",
    desc:"Засвар, тестчилэл"
  },
  {
    img:"http://www.sgceng.com/snp_lib/showpic.php?recordID=630&timestamp=1204139644&table=sgcengco",
    info:"Эрчим хүчний барилга угсралт",
    desc:"Засвар, тестчилэл"
  }
  ] ;
})

This is index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
          
<div class="slider" ng-app="starter" ng-controller="slider">
    <ul class="slides">
      <li ng-repeat="picture in pictures">
        <img ng-src="{{picture.img}}"> <!-- image -->
        <div class="caption center-align">
          <h3 class="black-text">{{picture.info}}</h3>
          <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
        </div>
      </li>
    </ul>
  </div><!--slider-->

почему он не появляется?

Danna 27 янв. 2016, в 09:28

Источник

0

Можете ли вы получить доступ к данным контроллера из пользовательского интерфейса?
Shaishab Roy 27 янв. 2016, в 07:40
0

где вы создали экземпляр контроллера ?? нг-контроллер?
Diljohn5741 27 янв. 2016, в 07:43
0

ng-app = "starter" ng-controller = "slider" добавьте это в тег своего тела
Shailesh Singh 27 янв. 2016, в 07:45
0

@ Diljohn5741 В теле я написал ng-app и использовал ui-router для добавления контроллера
Danna 27 янв. 2016, в 07:52
0

что это показывает на странице, если вы попробуете {{картинки}} перед ng-repeat?
Diljohn5741 27 янв. 2016, в 07:57

Показать ещё 3 комментария

Теги:

javascript

angularjs

api

1 ответ

Ещё вопросы

Можете ли вы получить доступ к данным контроллера из пользовательского интерфейса?
где вы создали экземпляр контроллера ?? нг-контроллер?
ng-app = "starter" ng-controller = "slider" добавьте это в тег своего тела
@ Diljohn5741 В теле я написал ng-app и использовал ui-router для добавления контроллера
что это показывает на странице, если вы попробуете {{картинки}} перед ng-repeat?

Shaishab Roy · Accepted Answer · 2016-01-27T05-43-00.000Z

Вы должны включить контроллер на страницу index.html. и используйте ng-app = "moduleName" и используйте ng-controller = "yourController". скажем, файл script.js вашего контроллера.

<!DOCTYPE html>
<html data-ng-app='starter'> /* used your module name as ng-app name */

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script> /* load your controller file */
  </head>

  <body ng-controller="slider"> /* use your controller  */
    <h1>Hello Plunker!</h1>
    <div class="slider">
    <ul class="slides">{{pictures}}
      <li ng-repeat="picture in pictures">
        <img ng-src="{{picture.img}}"> <!-- image -->
        <div class="caption center-align">
          <h3 class="black-text">{{picture.info}}</h3>
          <h5 class="blue blue-text text-lighten-4">{{picture.desc}}</h5>
        </div>
      </li>
    </ul>
  </div>
  </body>

</html>

Демо-ссылка PLUNKER

Огромное спасибо. он работает только на одной странице. Я использую angular-ui-router Как я могу загрузить его? Пожалуйста, проверьте это код Plunker
В демоверсии вашего плункера есть проблема с внедрением зависимостей, удалите 'starter.controller' из зависимости модуля, например: var app=angular.module('starter', ['ui.router']) . тогда должно работать
Также $('.slider').slider({full_width: true}); используйте в $timeout . См. мою обновленную демонстрацию PLUNKER