Ad

Angular Directive Isn't Running And TemplateUrl Isn't Showing

- 1 answer

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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad