Angular Directive isn't running and templateUrl isn't showing

Question

Can't find why this directive isn't runnning. No errors of any type, link function not being called and template is not being rendered.

Original code is on TypeScript but I have reproduced exactly the same behavior in a plnkr trying to make the problem come up, but still.

Plnkr version: http://plnkr.co/edit/vBARsB9PhZ4txjlmolMM?p=preview

JS

angular.module('DirectivesApp', [])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.text = 'find this, also this';
    $scope.Items = [{
      Key: 'find this',
      Value: 'FOUND 1'
    }, {
      Key: 'also this',
      Value: 'FOUND 2'
    }];

  }]).directive('multiSelect', function() {
    return {
      templateUrl: 'multipleSelect-template.html',
      $scope: {
        text: '@text',
        Items: '&Items'
      },
      restrict: 'A',

      link: function($scope, element, attrs) {
        $scope.text = attrs.text;

      }
    };
  });

HTML

<div ng-app="DirectivesApp">
    <div ng-controller="MainCtrl">
      <multi-select text="{{text}}" Items="{{Items}}"></multi-select>
    </div>
  </div>

Template

<input type="text" disabled value="{{text}}" />
<input type="checkbox" ng-repeat="item in Items" value="{{item.Key}}"/><label>{{item.Value}}</label>

PS: trying to make a custom multiselect control.

First thing to fix is the directive config property should be scope, not $scope ~ docs.angularjs.org/api/ng/service/$compile#-scope- — Phil
Also, you're using the & binding completely wrong. Did you perhaps mean to use =Items? — Phil
another problem here is your restrict property. you are using the directive as an element, the value should be E — PrinceG
$scope instead of scope was copy error, thanks, just fixed. working now on binding and restrict. — celerno

Phil Phil · Accepted Answer · 2016-01-07T02:05:06

To summarise all the comments above, this should be all you need

return {
    templateUrl: 'multipleSelect-template.html',
    scope: {
        text: '@',
        Items: '='
    }
};

The default restrict is "EA" anyway and you don't need to bind attrs.text to the $scope as it's already bound in the isolate scope.

Angular Directive isn't running and templateUrl isn't showing

1 Answers