CODEWITHSUNDEEP
angularjs
Johann
Johann

Reputation: 29867

Injecting service into controller

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

Upvotes: 0

Views: 107

Answers (1)

ivarni
ivarni

Reputation: 17878

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/

Upvotes: 2

Related Questions