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

时间:2016-07-24 08:00:09

标签: angularjs

我有一个弹出窗体,其中有很多标签。

它'像这样:

index.js

vm.openCreateOrEditPropertyModal = function (resolveProperty) {
    var modalInstance = $uibModal.open({
        templateUrl: '~/App/tenant/views/propertymanagement/createOrEditPropertyModal.cshtml',
        controller: 'tenant.views.propertymanagement.createOrEditPropertyModal as vm',
       resolve: {
              resolveProperty: function () {
              return resolveProperty;
                }
               }
                });
        };

标签是这样的:

createOrEditPropertyModal.cshtml

<uib-tabset class="tab-container tabbable-line" type="pills">
  <uib-tab heading="@L("PropertyInformation")">
       <div ng-include="'~/App/tenant/views/propertymanagement/tabs/propertyForm.cshtml'"></div>
      </uib-tab>
</uib-tabset>

createOrEditPropertyModal.js

(function () {
    appModule.controller("tenant.views.propertymanagement.createOrEditPropertyModal", [
        "$scope", "resolveProperty", "localStorageService", "$uibModalInstance", function ($scope, resolveProperty, localStorageService, $uibModalInstance) {

            var vm = this;


            //to close the pop up
            vm.cancel = function () {
                $uibModalInstance.close();
            };
        }
    ]);
})();

propertyForm.cshtml

<div ng-controller="tenant.views.propertymanagement.tabs.propertyForm as vm">
    <button type="button" ng-click="vm.cancel()">@L("Close")</button>
</div>

propertyForm.js

(function () {
    appModule.controller("tenant.views.propertymanagement.propertyForm", [
        "$scope", "resolveProperty", "localStorageService", function ($scope, resolveProperty, localStorageService) {

            var vm = this;



        }
    ]);
})();

以上设置工作正常。现在我需要访问子表单cancel()文件中的createOrEditPropertyModal.js方法(即propertyForm.cshtml)。但它没有被解雇。可以告诉我该怎么做?我试过这样ng-click="$parent.cancel()"。但它不起作用。

2 个答案:

答案 0 :(得分:1)

我可以想到三种可能的解决方案:

  1. 这是因为function create_slug_html($string, $ext='.html'){ $replace = '-'; $string=strtolower($string); $string=trim($string); //remove query string if(preg_match("#^http(s)?://[a-z0-9-_.]+\.[a-z]{2,4}#i",$string)){ $parsed_url = parse_url($string); $string = $parsed_url['host'].' '.$parsed_url['path']; //if want to add scheme eg. http, https than uncomment next line //$string = $parsed_url['scheme'].' '.$string; } //replace / and . with white space $string = preg_replace("/[\/\.]/", " ", $string); $string = preg_replace("/[^a-z0-9_\s-]/", "", $string); //remove multiple dashes or whitespaces $string = preg_replace("/[\s-]+/", " ", $string); //convert whitespaces and underscore to $replace $string = preg_replace("/[\s_]/", $replace, $string); //limit the slug size $string = substr($string, 0, 100); //slug is generated return ($ext) ? $string.$ext : $string; 函数不在cancel范围内,而是在父控制器上。实现此目的的一种方法可能是为控制器使用不同的命名:related SO answer

  2. 否则,您可以将$parent函数放在cancel中的$scope变量上。

  3. 只需更改createOrEditPropertyModal

    createOrEditPropertyModal.js

    vm.cancel = function () {
        $uibModalInstance.close();
    };
    
    1. 您可以将函数传递给类似于指令的模态:related SO answer

答案 1 :(得分:1)

您可以直接在子表单中执行vm.cancel(),因为您已经在使用controllerAs模式。但在你的情况下,你有两个控制器别名vm它指的是当前的子控制器上下文。更改任一控制器别名的名称将使其工作。

解决此问题的最佳方法是将控制器别名更改为其他名称。控制器aaliases应该像查看他们的名字一样,你可以假装它是哪个控制器。

-

ng-click无效,因为cancel范围内没有$parent方法。你应该做$parent.vm.cancel()。但是我不希望你在观看时使用$parent,因为这是不好的做法。