无法从子控制器访问父控制器的方法

时间:2014-12-13 12:11:11

标签: javascript angularjs

我的HTML

<section class="localsContainer" ng-controller="LocalsCtrl">
    <h3>Lokale</h3>
    <div class="placesProgress"></div>
    <ul>
        <li ng-repeat="city in cities">
            <p ng-show="city.LocalCount > 0" ng-click="getLocals(city.Id)">{{city.Name}}</p>
            <ul ng-show="activeCityLeft === city.Id">
                <li ng-repeat="local in locals[city.Id]">
                    <p>{{local.Name}} ng-click="getDetails()"</p>   
                </li>
            </ul>
        </li>
        <li ng-if="cities.length == 0">
            <strong>Nie znaleziono</strong>
        </li>
    </ul>
</section>

和js

angular.module('sandboxApp')
  .controller('MainCtrl', function ($scope, API) {
      API.newRequest('getCitiesList').success(function (data, status, headers, config) {
          $scope.cities = data.data;
      });
      $scope.getDetails = function () {
          console.log("test")
      };
  })
  .controller('LocalsCtrl', function ($scope, API) {
      $scope.locals = {};

      $scope.getLocals = function (cityid) {
          $scope.activeCityLeft = cityid;
          API.newRequest('getLocalList', { params: { 'city_id': cityid.toString() }, cache: true }).success(function (data, status, headers, config) {
              $scope.locals[cityid] = data.data;
          });
      };
  })

如果我理解正确,我应该可以调用“getDetails&#39;方法,因为它是在主控制器上定义的,甚至是从获得控制器但是嵌套在连接到主控制器的元素中的元素。但它确实有效,当我点击应该调用getDetails的元素时,它会显示&#39; ng-click =&#34; getDetails()&#39;作为HTML文本。

2 个答案:

答案 0 :(得分:2)

您的ng-click定义错误 - 您在<p>元素中将其定义为文字:

<p>{{local.Name}} ng-click="getDetails()"</p>

您应该将其定义为属性,因为它是一个指令:

<p ng-click="getDetails()">{{local.Name}}</p> 

答案 1 :(得分:2)

使用ng-click作为属性,因为它是指令,指令(属性)像属性一样使用,你将它显示为文本

see refrence用于ng-click

 <p ng-click="getDetails()">{{local.Name}} </p>