将服务注入控制器答案

【问题标题】：Injecting service into controller将服务注入控制器
【发布时间】：2014-07-17 14:12:41
【问题描述】：

将服务注入控制器时出现编译错误。此应用程序的预期输出应该只是网页上的文本“hello”。

<!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>

小提琴： http://jsfiddle.net/Xp5BF/1/

我显然做错了什么。我使用 SO 中发布的一些代码构建了这个： https://stackoverflow.com/a/14846975/753632

【问题讨论】：

return function () 你能给这个函数起个名字，然后像这样调用 svcMeetingsTemplate.name() 吗？？
我不明白。你在 Fiddle 中试过吗？
对我来说这看起来像 jsfiddle 是 jsfiddle。如果您在左侧的下拉列表中更改为“不换行 - 包含在中”，错误就会消失。什么都没有渲染，但这可能是因为代码并没有真正做任何事情。
嗯，有一些明显的错误。应该显示文本“Hello”。
那么你需要在你的指令中$watch on $scope.template 并实际使用它。给我一点时间。

标签： angularjs

【解决方案1】：

该错误似乎来自 jsfiddle 在处理外部依赖项时表现不佳。通过要求它在 <head> 而不是 onLoad 中包含角度来修复该位。

要实际渲染模板，$watch 在指令中像这样

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

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

【讨论】：

@AndroidDev 我更喜欢plnkr.co，因为我认为它处理得更好。