將角度指令與控制器鏈接

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>