Angular directive and controller

Question

I have a directive and a controller. The directive as fallows:

calcP.directive('modalDialog', function() {
    return {
        restrict: 'E',
        scope: {
            show: '='
        },
        replace: true, 
        transclude: true, 
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            **scope.hideModal = function() {
                scope.show = false;
                delete $sope.types.individual;**
            };
        },
        template: "..."
    };
});

My controller:

    calcP.controller('calcPCtrl', function($scope, $http, $window, emailSenderEndpoint) {

$scope.getVariantDomovoy = function () {
        $scope.types.domovoy = $scope.variants.domovoy;
    };
    $scope.getVariantIndividual = function () {
        $scope.types.individual = $scope.variants.individual;
    };

    ...
    $scope.modalShown = false;
        $scope.toggleModal = function() {
            $scope.modalShown = !$scope.modalShown;
        };

    });

My template:

template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay' ng-click='hideModal()'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'>X</div><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"

I'd like to delete some $scope by adding it to a function. But the browser shows the error that it can't find the variable $scope.types.individual.

I just try to learnAangularJS by myself and still have some problems.

delete $sope.types.individual; ?? or delete $scope.types.individual;?? — DilumN
– DilumN, Commented Mar 2, 2017 at 11:39
As I understand correctly your types is on your controller? So you can do delete $scope.$parent.types.individual; But it seems you're trying to achieve something and use a non-angular way of doing so — devqon
– devqon, Commented Mar 2, 2017 at 11:42
@DilumN Yes, $scope, sorry .. but I still have the same error — P.Shustenko
– P.Shustenko, Commented Mar 2, 2017 at 11:42

DilumN · Accepted Answer · 2017-03-02 11:48:37Z

2

If you want to change a value of your controller from a directive, first you have to pass that variable to the directive with two way binding. Then you can change that value as below.

calcP.directive('modalDialog', function() {
    return {
        restrict: 'E',
        scope: {
            show: '=',
            types: '='
        },
        replace: true, 
        transclude: true, 
        link: function(scope, element, attrs) {
            scope.dialogStyle = {};
            if (attrs.width)
                scope.dialogStyle.width = attrs.width;
            if (attrs.height)
                scope.dialogStyle.height = attrs.height;
            **scope.hideModal = function() {
                scope.show = false;
                scope.types.individual = "";**
            };
        },
        template: "..."
    };
});

Make sure you are passing your $scope.types from the controller to the directive. Same as you pass show parameter

May be like this,

<model-dialog show="show" types="types"></model-dialog>

answered Mar 2, 2017 at 11:48

DilumN

2,8956 gold badges33 silver badges45 bronze badges

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

3 Comments

P.Shustenko Over a year ago

I have added my template to the original post. I have the whole application inside <model-dialog>

DilumN Over a year ago

Can you put your html code where you include <model-dialog>

P.Shustenko Over a year ago

Sorry, I have found my mistake. Your answer helped me. Thank you very much.

Collectives™ on Stack Overflow

Angular directive and controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related