Question

我在网络应用中有几个canvas区域，可以在官方文档中捕获人们的签名。我正忙着在较小的设备上开发弹出窗口，为用户提供更大的区域登录。签名区域是这样的：

<canvas width="400" height="200" ng-signature ng-model="Party1.SignatureBase64"></canvas>
<a href="" ng-click="getSignatureModal(Party1.SignatureBase64)">Show Signature Pad</a>

然后我在视图范围上有以下函数弹出一个模态来收集签名数据，但是通过JavaScript的“按值”传递，我仍然坚持如何将函数中的值返回到模型。

$scope.getSignatureModal = function (signatureBase64) {

    var modalInstance = $modal.open({
        templateUrl: 'signatureWindow.html',
        controller: 'SignatureModalController',
        size: 'lg',
        resolve: {
            base64: function () {
                return signatureBase64;
            }
        }
    });

    modalInstance.result.then(function (base64) {
        signatureBase64 = base64;
        return base64;
    }, function () {
        alert('Canceled');
    });
};

我可以将我的ng-click更新为：

ng-click="Party1.SignatureBase64=getSignatureModal(Party1.SignatureBase64)"

但这似乎有点笨拙。或者这是最好的方式？

Answer 1

我会通过从模态注入$ rootScope和$broadcast来实现。

改进控制器以接收模型作为消息上的有效负载，并将其与模态实现分离。前段时间，我创建了一个使用$rootScope作为消息代理的小提琴。我不确定我是否有足够的特定域名信息，以确保这些信息能够满足您的需求，但您可以在$rootScope as a Message Broker

查看。

查看

<div ng-controller="Messenger">
   <input ng-model="message" style="width:100px">
   <input ng-model="target" style="width:87px" >
   <button ng-click="handleClick(message,target);">Send Message</button>
</div>

 <div ng-controller="ControllerOne">
     <input ng-model="message" >
 </div>

 <div ng-controller="ControllerTwo">
     <input ng-model="message" >
 </div>

选择角色的东西

var myModule = angular.module('MessageOrientedModule', []);
myModule.factory('messagingService', function($rootScope) {
var service = {};

service.notify = function(message, recipient, type){
    var payload = {};
    Object.defineProperty(payload,"recipient",{value:recipient});
    Object.defineProperty(payload,"body",{value:message});

    $rootScope.$broadcast(type,payload);
};


return service;
});

function Messenger($scope, messagingService) {
   $scope.handleClick = function(message,target) {
       messagingService.broadcastSpecific(message,target);
   };

   $scope.$on('message.broadcast', function(event, message) {
       $scope.message = message.body + ' [SENT]';
});}

function ControllerOne($scope) {
   $scope.$on('message.broadcast', function(event, data) {
       if(data.recipient != "Ctrl1")
       {
           $scope.message = '123 Not it!';
       }
       else
       {
          $scope.message = '[Ctrl1][Received]:' + data.body;
       }
   });
}

function ControllerTwo($scope) {
   $scope.$on('message.broadcast', function(event,data) {
       if(data.recipient != "Ctrl2")
       {
           $scope.message = '123 Not it!';
       }
       else
       {
         $scope.message = '[Ctrl2][Received]:' + data.body;
       }
   });
}

有什么方法可以将对Angular模型的引用传递给作用域函数吗？

1 个答案: