javascript - Access scope from ng-template - Stack Overflow

Using AngularJS, I want to access scope variable from inside a <script type="text/ng-template".

<script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show=isFrench>Télécharger la cartographie</h4>
        <h4 ng-show=isEnglish>Download cartography</h4>
        <a href="../downloads/PDF/{{currentLanguage}}/{{currentCartography}}.pdf" download>
            <img  src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
        </a>   
        <a href="../downloads/VSD/{{currentCartography}}.vsd" download>
            <img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
        </a>   
        <a href="../downloads/PNG/{{currentLanguage}}/{{currentCartography}}.png" download>
            <img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
        </a>   

         <div class="ngdialog-buttons">
             <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
         </div>
    </div>
</script>

isFrench and isEnglish are 2 booleans from my controller.

Same for currentCartography and currentLanguage, they are strings from my controller.

I also tried with getter inside and outside of the controller, same result.

Using AngularJS, I want to access scope variable from inside a <script type="text/ng-template".

<script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show=isFrench>Télécharger la cartographie</h4>
        <h4 ng-show=isEnglish>Download cartography</h4>
        <a href="../downloads/PDF/{{currentLanguage}}/{{currentCartography}}.pdf" download>
            <img  src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
        </a>   
        <a href="../downloads/VSD/{{currentCartography}}.vsd" download>
            <img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
        </a>   
        <a href="../downloads/PNG/{{currentLanguage}}/{{currentCartography}}.png" download>
            <img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
        </a>   

         <div class="ngdialog-buttons">
             <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
         </div>
    </div>
</script>

isFrench and isEnglish are 2 booleans from my controller.

Same for currentCartography and currentLanguage, they are strings from my controller.

I also tried with getter inside and outside of the controller, same result.

• javascript
• html
• angularjs
• ng-dialog

Share Improve this question Follow edited Apr 8, 2015 at 14:49 Ellone asked Apr 8, 2015 at 13:35 ElloneEllone 3,8981212 gold badges4848 silver badges7777 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

For those falling into the same issue :

Using ngDialog, we need to precise we want to use the scope. In my case, I added the dialog open functions in my controller, I needed to edit the one I'm using in order to add the scope: $scope, line as follows :

$scope.openPlainCustomWidth = function () {
    $rootScope.theme = 'ngdialog-theme-plain custom-width';
    ngDialog.open({
        template: 'firstDialogId',
        controller: 'InsideCtrl',
        className: 'ngdialog-theme-plain custom-width',
        scope: $scope, // this line wasn't here before
        closeByDocument: false
    });
};

three things you can try

1. use ng-href instead of href

2. for ng-show remove double curly {{

3. if above two doesnt work use $parent (only if you are not using controller-as)

You are using ng-show incorrectly, it doesn't use {{}} expressions.

Try: ng-show="isFrench"

Beyond that it isn't clear what you are asking