Angular app不会加载(JSFiddle)

时间:2013-02-23 13:36:18

标签: coffeescript angularjs

我这里有一个简单的角度应用

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

2 个答案:

答案 0 :(得分:5)

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

  • 在选择框架下选择无包裹体
  • 选择no-library(pure-js)
  • 将角度js添加为资源
  • 使用此角度引导程序手动初始化角度

    angular.bootstrap document, ['WhereToMeet']

  • 生成的javascript代码位于另一个范围内。你必须解决这个问题 通过将-b参数添加到coffeescript编译器或导出您的函数 明确地通过

    root = exports ? this
    root.clicked = ->
          alert "clicked"
          $scope.shape = "Clicked"
    

    现在正在使用Fiddle Here

答案 1 :(得分:1)

昨天我和jsfiddle和angular有类似的问题。我必须做一些事情才能让它发挥作用:

  • Jsfiddle正在为html和body添加标签,所以只需编写应该在body标签内部的标记。
  • 使用ng-app =“myApp”添加包装div,而不是尝试指定其他html标记
  • 在选择框架下选择无包裹体

我不知道你的“传单”是做什么的,但我更新了你的小提琴,以便点击将触发警报

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

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

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