Есть ли способ передать ссылку на угловую модель на функцию области видимости?

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="Party1.SignatureBase64=getSignatureModal(Party1.SignatureBase64)" 

, но это, кажется, становится немного громоздким. Или это лучший способ?

Answer 1

Я бы сделал это, введя $ rootScope и $broadcast ing из модального.

Дооснастить контроллер, чтобы получить модель в качестве полезной нагрузки в сообщении, и вы отделите ее от модальной реализации. Некоторое время назад я создал скрипку, которая использует $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; 
     } 
    }); 
}