CODEWITHSUNDEEP
angularjs
Mr Smith
Mr Smith

Reputation: 3486

Problems with angular-modal-service

I'm trying to use the angular modal service to display a modal with an inline template, but I get an error. What am I missing? I just want to display a simple message in the modal. Here is the fiddle: http://jsfiddle.net/qhcsg6Lk/

Page 

<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>

<div class="container" ng-app="app" ng-controller="Controller">

    <h3>Angular Modal Service</h3>
     <a class="btn btn-default" href ng-click="show()">Show a Modal</a>

</div>

Controller

    var app = angular.module('app', ['angularModalService']);

    app.controller('Controller', function($scope, ModalService) {

$scope.test="outer scope"
    $scope.show = function() {
        ModalService.showModal({
            template: "{{test}}",
            controller:  function() {
                  this.test="test scope";
            },
            controllerAs : "modal"
        })
    }
 })

ERROR:

enter image description here

Upvotes: 0

Views: 226

Answers (2)

Sajal
Sajal

Reputation: 4401

this.test is in the scope now. Kindly remove the "" from here. You are making it a string.

template: {{test}},

UPDATE:

Template is basically the view for the modal/overlay. I don't think it can be a string/text.

You would have to pass an absolute/relative path to an html file, or the html code itself, which inside would contain the string/text in <p>{{model.test}}</p> to display the message you want.

Upvotes: 1

Win
Win

Reputation: 62300

You want to access test as {{modal.test}} since you have controllerAs syntax.

http://jsfiddle.net/jvara30w/

According to the documentation here, if you use template, you will need to provide raw HTML. 

template: "<div>{{modal.test}}</div>",

Upvotes: 1

Related Questions