user6680 user6680 - 3 months ago 7
AngularJS Question

Array not outputting in modal

I can't figure out why the content in my array isn't outputting in the modal.
I'm doing a ng-repeat. the buttons are pulling from the array, but the content inside the modal is blank. Can anyone tell me whey?

Here's a jsfiddle:
http://jsfiddle.net/8s9ss/203/

<div ng-app="app">

<div ng-controller="RecipeController">
<div ng-repeat="recipe in ChickenRecipes">
<button class="btn btn-default" ng-click="open()">{{ recipe.name }}</button> <br />

<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Recipe: {{ recipe.name }}</h3>
</div>
<div class="modal-body">
Recipe Content<br />

{{ recipe.cookTime }}
{{recipe.directions}}
</div>
<div class="modal-footer">

</div>
</script>

</div>
</div>


</div>

Answer

$modal create a child scope (and default is child of $rootScope) for the modal

So what you need is something like this:

$scope.open = function (recipe) {
    $scope.recipe = recipe;
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      scope: $scope,
    });
};

And:

<button class="btn btn-default" ng-click="open(recipe)">{{ recipe.name }}</button> <br />

P/s: It's better to use $modal's resolve and controller option (pass the resolved data to the new controller)