綁定在定父

Question

採用了棱角分明的引導程序和$模式服務的控制器，我創建了一個彈出與下面的模板：

<div class="dialog modal-header" ng-show="header.length > 0"> 
    <h3 compile="header"></h3> 
</div> 
<div class="dialog modal-body"> 
    <div compile="bodyTemplate"></div> 
</div> 
<div class="dialog modal-footer"> 
    <button ng-repeat="button in buttons" 
      ng-show="$parent.$eval(button.showExpression)" 
      ng-class="button.class" 
      ng-click="onButtonClick(button)"> 
     <div compile="button.template"/> 
    </button> 
</div> 

我建了一個彈出式服務，幫助在範圍設置默認值，以及作爲從templateUrl載入bodyTemplate。

// snippit of my popup service 
function show(modalOptions, scope) { 

    // .... 
    // load template from modalOptions.bodyTemplateUrl 
    // .... 

    var extendedModalOptions = {}; 
    angular.extend(extendedModalOptions, defaultModelOptions, modalOptions); 

    extendedModalOptions.controller = function ($scope, $modalInstance) { 
     angular.extend($scope, scope); 

     // .... 
     // add to $scope additional properties from the extendedModalOptions 
     // such as the buttons array and loaded bodyTemplate 
     // .... 
    } 
    $modal.open(extendedModalOptions); 
} 

我要的是注入控制器使用的bodyTemplate，就像這樣：

<div class="dialog modal-header" ng-show="header.length > 0"> 
    <h3 compile="header"></h3> 
</div> 

<!-- Note the addition of ng-controller here --> 
<div class="dialog modal-body" ng-controller="bodyController"> 
    <div compile="bodyTemplate"></div> 
</div> 

<div class="dialog modal-footer"> 
    <button ng-repeat="button in buttons" 
      ng-show="$parent.$eval(button.showExpression)" 
      ng-class="button.class" 
      ng-click="onButtonClick(button)"> 
     <div compile="button.template"/> 
    </button> 
</div> 

這可以工作，但是，bodyController範圍的$父現在是給範圍$模式控制器。我想使用不同的父母。

我想能夠用我的服務彈出這樣的：

// from inside CustomerController 
popup.show({ 
    header: 'Test Popup', 
    parentScope: $scope, // the current scope of CustomerController 
    bodyTemplateUrl: 'testPopupTemplate.html', 
    bodyController: 'TestPopupController as testPopupVM' 
}); 

這是，我有點失落。我想我的彈出式服務可以創建這樣的控制器：

$scope.bodyController = $controller(extendedModalOptions.bodyController, { 
    $scope: extendedModalOptions.parentScope 
}); 

我不是100％肯定，但我認爲，讓我用正確的父控制器。但問題是，返回的值是新的作用域對象，而不是構造函數。

根據ng-controller上的angular docs，它只能綁定到構造函數。

如何在使用提供的父範圍時將主體控制器添加到彈出模板？

Answer 1

您試圖發明自己的$scope層次結構，而Angular提供的層次結構很好。

默認情況下，使用$modal服務打開的模式從$rootScope獲取新的子範圍。您可以通過設置基準模式的範圍明確改變這種情況，即

$modal({ 
    scope: yourBaseScope 
    // other modal options 
}) 

莫代爾將調用yourBaseScope.$new()在創建和使用它。因此，它可以訪問您在yourBaseScope中定義的所有變量和函數。

查看更多about modal的範圍in docs。

Answer 2

來自fracz的答案是更好的選擇，但我想提供替代黑客。

由於NG-控制器只能綁定到一個控制器功能，我建立了一個彈出的服務中：

$scope.bodyCtrl = function($scope) { 
    // HACK: replace the parent with the one from extendedModalOptions 
    $scope.$parent = extendedModalOptions.parentScope; 

    return $controller(extendedModalOptions.bodyController, { 
     $scope: $scope 
    }); 
}; 
// annotate the controller function so minification does't break injection 
$scope.bodyCtrl['$inject'] = ['$scope']; 

在示波器上更換$父手動有代碼的氣味。我沒有意識到你可以通過一個$ rootScope替代$ modal。