2013-05-28 59 views
1

我已经得到指令,服务于我的应用程序angularjs(在不同的文件中声明):数据绑定到外部模型

服务:

(function(){ 
    angular.module('core', []) 
    .factory('api', function() { 
     return { 
      serviceField: 100 
     }; 
    }) 
})(); 

指令:

(function(){ 
    angular.module('ui', ['core']) 
    .directive('apiFieldWatcher', function (api) { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: true, 
      template: '<div>+{{apiField}}+</div>', 
      controller: function($scope) { 
       $scope.apiField = 0; 
      }, 
      link: function (scope) { 
       scope.$watch(function(){return api.serviceField}, function(apiFld){ 
        scope.apiField = apiFld; 
       }); 
      } 
     } 
    }); 
})(); 

而且在另一个单独的文件中,我有原生模型:

function Model() { this.fld = 0; } 
Model.prototype.setFld = function(a) { this.fld = a; } 
Model.prototype.getFld = function() { return this.fld; } 

如何在我的AngularJS服务中绑定(双向)我的本地this.fld字段以评估价值?

回答

0

解决方法是在使用此代码:

Model.prototype.setFld = function(a) { 
    this.fld = a; 
    injector.invoke(['$rootScope', 'api', function($rootScope, api){ 
    api.setField(a); 
    $rootScope.$digest(); 
    }]); 
}; 

Model.prototype.getFldFromApi = function() { 
    var self = this; 
    injector.invoke(['api', function(api){ 
    self.fld = api.getField(); 
    }]); 
}; 

http://plnkr.co/edit/nitAVuOtzGsdJ49H4uyl

我认为这是好主意,使用$消化上$ rootScope,所以我们也许可以用

var scope = angular.element(elementObject).scope(); 

到得到所需的范围,并为它调用$ digest

+0

它看起来像你现在已经污染你的本质e模型与角度特定的cruft - 你不应该这样做 – Jonah

+0

你没错 - 这不是最好的解决方案。我认为如果我们有某种基于事件的系统,那么我们可以发出模型修改事件,并在事件处理函数中调用模型外部的角度特定代码。为了将数据从角度转换为模型,我认为我们可以创建某种本地“服务”,该角色提供对角度服务字段和方法的访问,因此我们将该角色特定的所有员工称为该额外的本地层,而不是在模型中。我在正确的方式? –

+0

角应该使用并委托给您的Model对象,而不是其他方式。让你的模型对象在任何需要它们的地方都可用的一种方法是将它们包装成角度服务。然后你可以将它们注入角码。 – Jonah