离子弹出模板访问app.js $ scope

Question

我在我的Ionic应用程序中弹出了一个弹出窗口。这个弹出窗口遵循我制作的模板..

RadioTemplate.html

 <script id="RadioTemplate.html" type="text/ng-template" ng-controller="TodoCtrl">
<label>
<p>Fill in catergory name</p>
<input type="text" placeholder="Rent">
</label>
<br />
<br />
<p>button check is: {{button1}} </p>
<div class="row">

<div class="col col-25"><button class="button button-outline button-button1" id="button1in" nh-show=button1></button></div>
<div class="col col-25"><button class="button button-outline" id="button2in"></div>
<div class="col col-25"><button class="button button-outline" id="button3in"></div>
<div class="col col-25"><button class="button button-outline" id="button4in"></div>
</div>


<div class="row">

<div class="col col-25"><button class="button button-outline" id="button5in" ng-show="button1"></div>
<div class="col col-25"><button class="button button-outline" id="button6in"></div>
<div class="col col-25"><button class="button button-outline" id="button7in"></div>
<div class="col col-25"><button class="button button-outline" id="button8in"></div>
</div>


<div class="row">

<div class="col col-25"><button class="button button-outline" id="button9in"></div>
<div class="col col-25"><button class="button button-outline" id="button10in"></div>
<div class="col col-25"><button class="button button-outline" id="button11in"></div>
<div class="col col-25"><button class="button button-outline" id="button12in"></div>
</div>
</script>

正如您所看到的，我正在尝试在此弹出窗口中显示某些按钮。为此，我需要它来读取button1的$ scope。

app.js

.controller('TodoCtrl',  function($scope, $ionicPopup, $timeout) {
$scope.button1 = true;
});

但正如您所看到的，它无法读取{{button1}}！ 它可以在我的主HTML文件中读取它（模板也在我的主HTML文件中）

解决方案：

以前我有这个。我忘了添加范围：$ scope！

$scope.popUpColors = function(){
$scope.popUp = $ionicPopup.alert({
title: 'Colors!',
templateUrl: 'RadioTemplate.html',
 });
 };

添加后，它看起来像这样。

$scope.popUpColors = function(){
$scope.popUp = $ionicPopup.alert({
title: 'Colors!',
templateUrl: 'RadioTemplate.html',
scope: $scope
});
};