Angular directive not working in ionic.js

Question

I have some troubles to get my directive to load in my ionic.js web app using angular. I can pass the variable {{someTitle}} from the controller to the template, however the directive does not get loaded, i.e. <div class="blaha" ng-transclude>abc123</div> does not get passed to the template... Am I missing something fatal below:

Ionic template:

<ion-view title="Roll the Dice">
  <ion-content has-tabs="true">
      <div my-dice>{{someTitle}}</div>

      <div class="card">
          <div class="item item-text-wrap">
              {{someTitle}}
          </div>
      </div>


      <button class="button button-dark button-full button-positive">
          Full Width Block Button
      </button>

  </ion-content>
</ion-view>

Controller code:

'use strict';
angular.module('TrueDice.controllers', [])


// A simple controller that fetches a list of data from a service
.controller('HistoryIndexCtrl', function($scope, TrueRandomService) {

        if($scope.rands="undefined"){
            $scope.rands = [];
        }
        TrueRandomService.getRand(1).success(function(data){
            $scope.rands.unshift(data);
            console.log(data);
        });
})
.controller('HistoryDetailCtrl', function($scope, $stateParams, TrueRandomService) {
  //currently empty

}).controller('RollViewCtrl', function($scope){
    $scope.someTitle="BLA";

}).directive('my-dice', ['$rootScope', function($rootScope) {
        return {
            restrict: 'E',
            template: '<div class="blaha" ng-transclude>abc123</div>',
            replace: true,
            transclude: true,
            scope: {},
            controller: function($scope, $element) {
               //currently empty
            }
        }
    }]);

NotWorking

Jossef Harush Kadouri · Accepted Answer · 2014-05-17 18:06:07Z

6

Remove - from directive name:

directive('myDice', ['$rootScope', function($rootScope) {

and according to restrict: 'E', you should place element in html:

<my-dice>{{someTitle}}</my-dice>

example

edited May 17, 2014 at 18:06

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

answered May 17, 2014 at 18:01

ndpu

22.6k6 gold badges61 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular directive not working in ionic.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related