Access value in controller for ng-if property in html element

Question

I have an existing module which I get, I add a directive which loads an external file containing a modal window and I am setting the initial value of the modal to true:

var application = angular.module('app');
application.directive("history", function () {
    return {
        templateUrl: "dir/dir/dir/file.html"
    };
});
application.controller("factoryController", function ($scope) {
    $scope.ShowModal = true; 
});

In my HTML I have my modal window, and I want to create the window when my ShowModal property in my controller is true. How do I access that property in the HTML? I've tried this:

<div ng-if="ShowModal" id="modal" class="modal" >

but this does not seem to work. It seems very simple, but I'm fairly new to angular js so any help would be great!

Well there's more that I am going to be adding to my directive later. What I have there is just the base needed to get the modal to display. Do you know how to access that value? I tried placing that value in an object as well to preserve the scope but that did not work either. — SQL and Java Learner
– SQL and Java Learner, Commented Jul 7, 2017 at 14:39

Vivz · Accepted Answer · 2017-07-07 15:33:22Z

1

To invoke the new directive, make an HTML element with the same tag name as the new directive.

When naming a directive, you must use a camel case name, myHistory, but when invoking it, you must use - separated name, my-history .You can invoke a directive by using many methods in view, an element being one. So try this:

JS:

 var application = angular.module('app');
    application.directive('modalDialog', function($rootScope) {
    return {
        restrict: 'E',
        scope: {
            show: '=',
            close: '='
        },
        replace: true,
        transclude: true,
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};
            scope.dialogStyle.width = '500px';
            if (attrs.width) scope.dialogStyle.width = attrs.width;
            if (attrs.height) scope.dialogStyle.height = attrs.height;
            if (attrs.header) scope.dialogHeader = attrs.header;
            if (attrs.content) scope.dialogContent = attrs.content;
            if (attrs.closeText) scope.closeText = attrs.closeText;
            scope.hideModal = function() {
                scope.show = false;
            };
            scope.$watch('show',function(value){
                if(value==true){
                    $rootScope.noScroll = true;
                }else{
                    $rootScope.noScroll = false;
                }
            })
        },
        template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><span ng-if='close==true' class='ng-modal-close' ng-click='hideModal()'>X</span><h2 class='ng-modal-header' ng-if='dialogHeader'>{{dialogHeader}}</h2><div class='ng-modal-dialog-content'><p ng-if='dialogContent'>{{dialogContent}}</p><ng-transclude></ng-transclude><button type='button' ng-click='hideModal()' ng-if='closeText'>{{closeText}}</button></div></div></div>"
    }
});
    application.controller("factoryController", function ($scope) {
        $scope.ShowModal = true; 
    });

HTML:

<modal-dialog show="ShowModal" ></modal-dialog>

Sample Usage:

<modal-dialog show="fileTypeError" header="Warning" close="true">
    <p>{{fileTypeError}}</p>
    <button type="button" ng-click="closefilePopup()" class="btn_approve1 none">Ok</button>
</modal-dialog>

edited Jul 7, 2017 at 15:33

answered Jul 7, 2017 at 14:48

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SQL and Java Learner Over a year ago

This did not work. I have double checked my syntax but the modal does not appear.

Vivz Over a year ago

I have updated my answer for a more dynamic popup. You can place the template URL's html code inside modal-dailog and style it your requirements

SQL and Java Learner Over a year ago

I made the code changes to the directive and changed the html tag, there is still nothing being displayed.

Vivz Over a year ago

Idk then coz the above directive works fine in my applications.Maybe there is some other problem in your code. I have added a sample usage in the above answer. See if this will help you

Collectives™ on Stack Overflow

Access value in controller for ng-if property in html element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related