将角度指令与控制器链接

Question

Been following through some Angular JS tutorials and I'm trying to translate them into the Ionic framework but running into some problems. I'm trying to write a reusable HTML control but the model is not being bound to the view. Here is my code:

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

I know I'm linking my js files correctly, however in the custom view the playlist.title never has a value. The controller never seems to bind to the html element. Double checking some angular tutorials I was going through, I'm following a similar approach and can't seem to figure out what the problem is.

Answer 1

In your directive you are defining a value on the directive's scope named info . So inside the template for the directive, you need to reference that with the name info , not playlist .

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