CODEWITHSUNDEEP
javascriptangularjshtml
zic10
zic10

Reputation: 2330

Linking angular directive with controller

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.

Upvotes: 1

Views: 83

Answers (1)

Sunil D.
Sunil D.

Reputation: 18193

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>

Upvotes: 2

Related Questions