2013-05-28 60 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