CODEWITHSUNDEEP
javascripthtmlangularjs
SQL and Java Learner
SQL and Java Learner

Reputation: 731

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

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!

Upvotes: 0

Views: 365

Answers (1)

Vivz
Vivz

Reputation: 6620

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>

Upvotes: 1

Related Questions