Question

我试图用ng-repeat显示silder。但是控制器中的图片和其他东西都不会出现。这是我的js代码

＆＃13;

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:"Засвар, тестчилэл"
  }
  ] ;
})

＆＃13;

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-->

＆＃13;

＆＃13; 为什么它不会出现？

Answer 1

您应该在 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="angular.js@1.4.8" 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 Demo Link

控制器中的东西没有使用AngularJS出现

1 个答案: