Question

我在Angular中加载部分依赖于URL的路径。

当我加载它加载的部分时，并响应控制器功能。但是我有一个有观察者的指令。当我使用

时，这不起作用

当我在主页面中加载HTML时，它工作正常。我这里有一个Plunker 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而不是coffeescript。

Answer 1

非常感谢所有帮助我找到问题的人。

这可以通过设置

来完成

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

到

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

这是因为ng-view将是一个孩子。这个简单的修复现在正在运行。

当从AngularJS中的Directive加载HTML时，请注意不工作

1 个答案: