0

I'm getting a compile error when injecting my service into my controller. The expected output of this app should be just the text "hello" on the web page.

<!doctype html>
<html>
<head>
</head>
<body ng-app="ddApp">
  <div ng-controller="ddController">
    <div svc-show-meetings template="{{template}}">
    </div>
  </div>
</body>
<script>
  var ddApp = angular.module('ddApp', [])

  ddApp.factory('svcMeetingsTemplate', function ()
  {
    return function ()
    {
      return "<div>Hello</div>";
    };
  });

  ddApp.directive('svcShowMeetings', function ($compile)
  {
    return {
      scope: true,
      link: function (scope, element, attrs)
      {
      }
    };
  });

  ddApp.controller('ddController', ['$scope', 'svcMeetingsTemplate', function ($scope, svcMeetingsTemplate)
  {
    $scope.template = svcMeetingsTemplate();
  }]);
</script>
</html>

Fiddle: http://jsfiddle.net/Xp5BF/1/

I'm obviously doing something wrong. I built this using some code posted here in SO: https://stackoverflow.com/a/14846975/753632

Community
  • 1
  • 1
Johann
  • 27,536
  • 39
  • 165
  • 279
  • return function () can you give a name to this function and call like this svcMeetingsTemplate.name() ?? – ThomasP1988 Jul 17 '14 at 14:15
  • I don't understand. Have you tried it in Fiddle? – Johann Jul 17 '14 at 14:16
  • To me this looks like jsfiddle being jsfiddle. If you change to "No wrap - include in " in the dropdown on the left hand the error goes away. Nothing is rendered, but that is probably because the code doesn't really do anything. – ivarni Jul 17 '14 at 14:18
  • Well there is something clearly wrong. The text "Hello" should be displayed. – Johann Jul 17 '14 at 14:19
  • Then you would need to `$watch` on `$scope.template` in your directive and actually do something with it. Give me a sec. – ivarni Jul 17 '14 at 14:22

1 Answers1

2

The error seems to come from jsfiddle not being awesome when it comes to working with external dependencies. That bit is fixed by asking it to include angular in <head> rather than on onLoad.

To actually render the template, $watch it in the directive like this

scope.$watch('template', function() {
    element.append(scope.template);
});

http://jsfiddle.net/Xp5BF/12/

ivarni
  • 17,658
  • 17
  • 76
  • 92