CODEWITHSUNDEEP
angularjsangular-directive
3gwebtrain
3gwebtrain

Reputation: 15303

Not able to update the `scope` value from directive function

Basically, i am using a service for to manage the popup-modal. some point i made the mistake or wrongly i have understand the way of using the service, i am not able to update the scope value here.

my service.js

"use strict";
angular.module("tcpApp").service("modalService", function () {

    this.Name = "My Modal";
    this.showModal = false; //default false.

});

controller.js:

$scope.modalService.Name = "Mo!" //changing the name works!
$scope.showModal = true; //changing the ng-show works!

here is my directive :

"use strict";

var modalPopup = function ( modalService ) {

    return {

        restrict : "E",

        replace : true,

        scope : {

            showModal:"=" //getting value from controller.js

        },

        templateUrl : "views/tools/modalPopup.html",


        link : function ( scope, element, attrs ) {

            scope.Name = modalService.Name; //if i remove this Name not working!

            scope.hideModal = function () {
                alert("i am called");
                scope.showModal = false; //it's not updating the value!


            }

        }

    }

}

angular.module("tcpApp")
.directive("modalPopup", modalPopup);

here is my html in the index.html :

<modal-popup ng-show="showModal" showModal="showModal"></modal-popup>

here is my template in views/tools/modalPopup.html

<div class='ng-modal'>
    <div class='ng-modal-overlay'></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'>Please test me {{Name}}</div>
    </div>
</div>

I am clicking on the hideModal(), But the showModal is not became false and the poup-up modal not closing.

where is the mistake here? and how the way i wrongly understand the service here? or what is the correct way to do this?

Thanks in advance.

Upvotes: 2

Views: 780

Answers (3)

dting
dting

Reputation: 39297

You don't need to pass around anything in your view because you have a service setup to do this for you:

(function() {
  "use strict";
  var app = angular.module("tcpApp", []);

  app.controller('someController', function($scope, modalService) {
    $scope.modal = modalService;
    $scope.modal.Name = "Mo!"
  });

  app.service("modalService", function() {
    this.Name = "My Modal";
    this.isOpen = false;
    this.hide = function() {
      this.isOpen = false;
    };
    this.show = function() {
      this.isOpen = true;
    };
  });
})();

(function() {
  "use strict";

  angular.module("tcpApp").directive("modalPopup", function(modalService) {
    return {
      restrict: "E",
      replace: true,
      scope: {},
      templateUrl: "modalPopup.html",
      link: function(scope, element, attrs) {
        scope.modal = modalService;
      }
    }
  });
})();
.ng-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ng-modal:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2);
}
.ng-modal-dialog {   
  width: 300px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 15px;
  margin-left: -150px;
  z-index: 100;
  text-align: center;
  background-color: white;
}
.ng-modal-close {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: red;
  margin: 5px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app='tcpApp'>
  <div ng-controller='someController'>
    <input type="text" ng-model="modal.Name" />
    <button ng-click='modal.show()'>show modal</button>
    <modal-popup></modal-popup>
  </div>

  <script type="text/ng-template" id="modalPopup.html">
    <div class='ng-modal' ng-if="modal.isOpen">
      <div class='ng-modal-dialog' ng-style='dialogStyle'>
        <div class='ng-modal-close' ng-click='modal.hide()'>X</div>
        <div class='ng-modal-dialog-content'>Please test me {{modal.Name}}</div>
        <input type=text" ng-model="modal.Name"/>
      </div>
    </div>
  </script>
</div>

Upvotes: 2

Sunil Madan
Sunil Madan

Reputation: 447

try this

scope.$apply(function() {
          scope.showModal = false;
        });

Upvotes: 0

Mansi Parekh
Mansi Parekh

Reputation: 519

Are you getting alert 'i am called'? If yes, try this

alert("i am called");
scope.showModal = false; //it's not updating the value!
scope.$apply(); // add this line it will update scope object value

Upvotes: 0

Related Questions