1

ここに単純な角度アプリがあります

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

4

2 に答える 2

5

コーヒーのスクリプトはわかりませんが、角度があります。私はちょうどそれを解決しようとしました。;-)

  • 選択したフレームワークの下で、ラップなしのボディを選択します
  • ライブラリなし(pure-js)を選択
  • angular js をリソースとして追加する

  • この角度ブートストラップを使用して角度を手動で初期化します

    angular.bootstrap document, ['WhereToMeet']

  • 生成された JavaScript コードは別のスコープにあります。-bパラメータをcoffeescriptコンパイラに追加するか、関数を明示的にエクスポートして、これを解決する必要があります

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

    それは今働いていますFiddle Here

于 2013-02-23T16:29:14.757 に答える
1

昨日、jsfiddle と angular で同様の問題が発生しました。それを機能させるには、いくつかのことをしなければなりませんでした：

  • Jsfiddle は html と body のタグを追加しているので、body タグ内に配置するマークアップを記述するだけです。
  • 別の html タグを指定しようとする代わりに、ng-app="myApp" でラッピング div を追加します
  • 選択したフレームワークの下で、ラップなしのボディを選択します

あなたの「リーフレット」が何をしているのかわかりませんが、クリックするとアラートがトリガーされるようにフィドルを更新しました

onclick を機能させるには、コントローラーのインスタンス化方法を変更する必要がありました。

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

app.controller("MapCtrl", function ($scope) {
    $scope.clicked = function (clicked) {
        console.log("clicked");
        $scope.shape = "Clicked";
        return alert("clicked");
    };
});
于 2013-02-23T14:50:58.537 に答える