Angular 应用程序无法加载（JSFiddle）答案

【问题标题】：Angular app wont load (JSFiddle)Angular 应用程序无法加载（JSFiddle）
【发布时间】：2013-02-09 01:41:39
【问题描述】：

我这里有一个简单的 Angular 应用程序

<div ng-app="WhereToMeet" ng-controller="MapCtrl">
  <leaflet shape="shape"></leaflet>
  <button ng-click="clicked()">Clicked</button>
</div>


app = angular.module("WhereToMeet", [])

app.directive "leaflet",  ->
  restrict: "E"
  replace: true
  transclude: true
  template: "<div id=\"map\"></div>"
  scope:
    shape: "=shape"
  link: (scope, element, attrs, ctrl) ->
    scope.$watch attrs.shape,( (newValue, oldValue) ->
      watched newValue
    ), true

  watched = (newValue) ->
    alert newValue


@MapCtrl = ($scope)  ->
  clicked = (clicked) ->
    $scope.shape = "Clicked"
    alert "clicked"

我在 JSFiddle http://jsfiddle.net/charliedavi/bezFB/22/ 中有它，但它不会运行。真的很奇怪。我认为我的咖啡脚本有错误，但我看不到它

错误：

Uncaught SyntaxError: Unexpected string fiddle.jshell.net:22
Uncaught Error: No module: WhereToMeet

在纯 JS 中

var app;

app = angular.module("WhereToMeet", []);

app.directive("leaflet", function() {



      var watched;
      ({
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<div id=\"map\"></div>",
        scope: {
          shape: "=shape"
        },
        link: function(scope, element, attrs, ctrl) {
          return scope.$watch(attrs.shape, (function(newValue, oldValue) {
            return watched(newValue);
          }), true);
        }
      });
      return watched = function(newValue) {
        return alert(newValue);
      };
    });

    this.MapCtrl = function($scope) {
      var clicked;
      return clicked = function(clicked) {
        $scope.shape = "Clicked";
        return alert("clicked");
      };
    };

http://jsfiddle.net/charliedavi/gsPx3/2/

【问题讨论】：

1) 您没有选择 CoffeeScript 作为该小提琴中的语言，并且 2) 您的代码有非常不一致的缩进。
我更新了缩进，如何启用 JSFiddle 的咖啡脚本
添加了一个javascript版本
您需要在左侧边栏中选择“no wrap(head)”选项，以便在 HTML 之前插入 JS，以使 Angular 工作。我现在没有收到任何错误，所以问题出在你的逻辑中。
在编写函数和指令时最好遵循骆驼符号。

标签： coffeescript angularjs

【解决方案1】：

昨天我遇到了与 jsfiddle 和 angular 类似的问题。我必须做几件事才能让它发挥作用：

Jsfiddle 正在为 html 和 body 添加标签，所以只需编写应该在 body 标签内结束的标记。
使用 ng-app="myApp" 添加一个包装 div，而不是尝试指定另一个 html-tag
在选择框架下选择无包装主体

我不知道你的“传单”在做什么，但我已经更新了你的小提琴，以便点击会触发警报

我必须更改控制器的实例化方式才能使 onclick 正常工作。

http://jsfiddle.net/t9nsY/2/

app.controller("MapCtrl", function ($scope) {
    $scope.clicked = function (clicked) {
        console.log("clicked");
        $scope.shape = "Clicked";
        return alert("clicked");
    };
});

【讨论】：

【解决方案2】：

我不知道咖啡脚本，但有角度。我只是试图解决它。 ;-)

在选择框架下选择无包装主体
选择无库（纯js）
添加 Angular js 作为资源
使用此角度引导程序手动初始化角度

angular.bootstrap document, ['WhereToMeet']
生成的 javascript 代码在另一个范围内。你必须解决这个问题通过将-b 参数添加到coffeescript 编译器或导出您的函数明确地通过
```
root = exports ? this
root.clicked = ->
      alert "clicked"
      $scope.shape = "Clicked"
```
它现在正在运行Fiddle Here

【讨论】：