Question

通过一些Angular JS教程，我正在尝试将它们转换为Ionic框架，但遇到了一些问题。我正在尝试编写可重用的HTML控件，但该模型未绑定到视图。这是我的代码：

//App.js


   angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

      .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html'
     })

    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })


  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

//Controller.js
angular.module('starter.controllers', [])


.controller('PlaylistsCtrl', function($scope) {

  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

//Directives.js
angular.module('starter.directives', [])

.directive('testInfo', function(){
    return {
        restrict: 'E',
        scope: {
           info: '='
        },
        templateUrl: 'templates/test_view.html'
    };
});

//Test View

<button class="item ion-item" >
    The playlist title is + {{playlist.title}}
</button>

//App View 

<ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" >
        <div ng-click="playListSelected($index)">
             <test-info info="playlist"></test-info>
        </div>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

//的index.html

我知道我正确地链接了我的js文件，但是在自定义视图中，playlist.title从来没有值。控制器似乎永远不会绑定到html元素。仔细检查我正在经历的一些角度教程，我正在采用类似的方法，似乎无法弄清楚问题是什么。

Answer 1

在您的指令中，您将在指令的范围info上定义一个值。因此，在指令的模板中，您需要使用名称info，而不是playlist来引用它。

<button class="item ion-item" >
    The playlist title is + {{info.title}}
</button>

将角度指令与控制器链接

1 个答案: