Question

基本上，我使用服务来管理popup-modal。某些方面我犯了错误或错误地理解了使用service的方式，我无法在此处更新scope值。

我的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!

这是我的指示：

"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);

这是index.html中的html：

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

这是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>

我点击了hideModal()，但showModal未成为false而poup-up模式未关闭。

这里的错误在哪里？以及我错误地理解service的方式如何？或者这样做的正确方法是什么？

提前致谢。

Answer 1

您无需在视图中传递任何内容，因为您有一个服务设置可以为您执行此操作：

(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>

Answer 2

你是否得到警报＆＃39;我被称为＆＃39;？如果是，请尝试此

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

Answer 3

试试这个

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

无法从指令函数更新`scope`值

3 个答案: