0

URLのルートに応じてAngularでパーシャルをロードしています。

パーシャルをロードすると、ロードされ、コントローラーの機能に応答します。しかし、私にはウォッチャーがいるディレクティブがあります。これを使用すると機能しません

メインページ内にHTMLをロードすると正常に動作します。私はここにこれのプランカーを持っています http://plnkr.co/edit/DK33pIrp0HyhUOjwm5X2?p=preview

基本的に「hello」をクリックすると$scope.originが変更され、ウォッチャーはそのイベントを起動する必要があります。そうではありません。

私のHTML：

<!DOCTYPE html>
<html ng-app="App">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.1.2/coffee-script.min.js"></script>
    <script src="app.js"></script>
    <script src="directive.js"></script>
  </head>

  <body ng-controller="MapCtrl">
    <ng-view></ng-view>
  </body>

</html>

app.js

var app;

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

app.config(function($routeProvider) {
  return $routeProvider.when("/", {
    templateUrl: "home.html",
    controller: MapCtrl
  });
});

this.MapCtrl = function($scope) {
  return $scope.clicked = function() {
    console.log("clicked");
    $scope.origin = Math.floor(Math.random() * 11);
    return console.log($scope.origin);
  };
};

directive.js

(function(angular) {
  var app;
  app = angular.module("App");
  return app.directive("leaflet", function() {
    return {
      restrict: "E",
      replace: true,
      transclude: true,
      template: "<section id='map' class='map'></section>",
      scope: {
        origin: "=origin"
      },
      controller: function($scope, $attrs) {
        return $scope.$watch("origin", (function(newValue, oldValue) {
          return alert("its changed");
        }), true);
      }
    };
  });
})(angular);

home.html

<button ng-click="clicked()">hello</button>

どうすればこれを機能させることができますか？

編集：私はこの純粋なJSを作成したばかりで、コーヒースクリプトではありません。

4

1 に答える 1

1

問題を見つけるのを手伝ってくれたすべての人に感謝します。

これは、を設定することによって行うことができます

<button ng-click="clicked()">hello</button>

に

<button ng-click="$parent.clicked()">hello</button>

これは、ng-viewが子になるためです。この簡単な修正が機能しています。

于 2013-03-09T11:46:42.640 に答える