javascript - 将数据从外部模型绑定(bind)到 angularjs

Question

我的应用程序中有指令和服务(在单独的文件中声明):

服务:

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

如何将我的原生 this.fld 字段绑定(bind)(两种方式)到我的 AngularJS 服务中的值？

Answer 1

解决方案是使用这段代码:

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 上使用 $digest 是个坏主意，所以我们也许可以使用

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

获取所需范围并为其调用 $digest