$範圍不適用於ng-template

我試圖使用模態編輯窗體，模態是在ng模板腳本中，但單擊編輯按鈕時不顯示窗體數據。
$範圍對模板腳本不可用。
我創建了一個Plunker here

$scope.setCurrentItem = function (item) { 
    $scope.currentItem = item; 
}; 

$scope.edit = function (item) {   //editing item 
    $scope.setCurrentItem(angular.copy(item));    
    //$scope.editItem = item; 
    openEditModal(); 
}; 

<!--html--> 
<script type="text/ng-template" id="myModalContent.html">  
<label for="name">Role: </label>         
<input type="text" ng-model="currentItem.roleName" required /> 
</script>

我該如何解決呢？

來源

2014-10-29 Red

默認情況下，ui bootstrap $modal使用$rootScope作爲其默認範圍。但是你認爲它會自動採用打開對話框的控制器的範圍，但這並沒有發生。但有一個scope屬性，您可以設置該屬性將範圍傳遞給UI模式，以便它將使用該範圍並在提供的範圍外創建子範圍，並將用作該模式的基礎範圍。所以你的模態包裝器也要在它的設置中使用scope屬性並傳遞它。

From Doc

範圍 - 一個作用域實例用於模態的內容（實際上是$模式服務將創建一個提供範圍的子範圍）。默認爲$ rootScope。

示範性變化： -

function openEditModal() { 
    var modalOptions = { 
     closeButtonText: 'Cancel', 
     actionButtonText: 'Save role', 
     headerText: 'Edit role', 
     bodyText: '', 
     scope:$scope //<-- Pass scope 
    }; 

    Modal.showModal({ templateUrl: 'myModalContent.html', size: 'lg' }, modalOptions).then(function (result) { 
     console.log("save!", result); 
    }); 
    }

，並在您的服務： -

/*I just did this here based on my limited understanding of your code*/ 
    return $modal.open(angular.extend(tempModalDefaults, customModalOptions)).result;

從你的語氣模板傳遞項背，我不知道，如果你的模板是通用的，如果那麼你可能想要採取不同的方法將數據傳回： -

<button class="btn btn-primary" ng-click="modalOptions.ok(currentItem)">{{modalOptions.actionButtonText}}</button>

Demo

來源

2014-10-29 03:30:48 PSL

謝謝！ PSL;我看到了什麼問題。 – Red 2014-10-29 05:06:37

$範圍不適用於ng-template

回答

相關問題