javascript - 从外部模型将数据绑定到 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字段绑定（两种方式）到我的 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