代码之家 › 专栏 › 技术社区 › Kirill Stas

AngularJs、UI路由器、ControllerAs&this、服务/工厂;为什么不起作用?哪里是错误?

angular-ui-router service angularjs

Kirill Stas · 技术社区 · 8 年前

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controller.js"></script>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css">
  </head>
  <body ng-app="mainApp">
    <div class="container-fluid">
        <div ui-view></div>
    </div>
  </body>
</html>

尝试.html

<h4>{{try.articles.thereAre[1].title}}</h4>

angularJS应用程序和两个文件中的ui路由器:App。js和controller.js。 app.js

angular.module('mainApp', ['dndLists', 'ui.router'])
  .config(function($stateProvider) {

    $stateProvider
      .state('try', {
        url: '/try',
        templateUrl: ' templates/try.html',
        controller: 'tryCtrl as try'
      })
    })

controller.js

angular.module('mainApp')
.service('defaultArticles', function() {
var me = this;

me.thereAre = [
  {
    id: '1',
    title: 'All Victims Are Out of the Hospit',
    titleCopy: 'All Victims Are Out of the Hospit',
    idea: "'We really were very lucky', Gov. Andrew M. Cuomo said after a significant blast in the Chelsea neighborhood of Manhattan. Nobody was killed, and all 29 of the injured have been released from the hospital. Remnants of the bomb and a second device were being investigated, and an additional 1,000 police officers and National Guard members were being deployed in the city.",
    hide_or_no: true,
    isCollapsed: true,
    picture: 'src/img/1.jpg'

  },
  {
    id: '2',
    title: 'How I Spent My New York Fashion Week',
    titleCopy: 'How I Spent My New York Fashion Week',
    idea: 'In early September, summer turns to fall and fashion turns to New York Fashion Week, the first leg in the monthlong international relay in which next springâs collections (or sometimes this fallâs collections) are shown. New Yorkâs week is particularly crammed, and while I raced uptown and down, subsisting on what I could cadge from catered shows and parties â a blini-and-caviar here (Ralph Lauren), a frosted mini doughnut there (Gucci), a cherry Coke Slurpee sucked down after dark (Alexander Wang) â I filled the margins of my notebook with the obscure, unexpected and pleasantly surprising. Here are some of the most memorable things I saw.',
    hide_or_no: true,
    isCollapsed: true,
    picture: 'src/img/2.jpg'
  }
 ];
})

.controller('tryCtrl', function(defaultArticles) {
var me = this;

me.artickles = defaultArticles;
})

我明白了 mistake 或者,我做错了什么?

1 回复 | 直到 8 年前

Radim Köhler user2134822 8 年前

模板期望

<h4>{{try.articles.thereAre[1].title}}</h4>

当您的代码使用

me.artickles = defaultArticles;

简单地说“艺术” k “les”不是“文章”

旁注:我会避免使用JS关键字,因为 try