如何将从工厂返回的对象绑定到元素上的方法？

Question

我正在学习如何使用 angular 并且我决定将一些代码拆分到它自己的模块中以保持我的主要 javascript 文件更干净。除了绑定部分，我一切正常。在我拆分它之前，我的 html 文件中有一个使用 ngStyle 的元素，我的作用域上有一个变量。每当我在我的范围上设置变量并且元素会更新时，我都会调用 $scope.$apply(function () { $scope.styles = { width: xxx }; }) 。

当我从代码中删除所有内容并将其分离到工厂和指令中时，我不知道如何做同样的事情。我基本上以下面的代码结束，除了 ele 的样式标签没有更新外，一切正常。

我想使用变量来保存值并生成样式对象，这样我就不必自己做额外的工作，我处理得对吗？如果是这样，我如何确保元素在 myFactory 的 size 变量更改时更新？如果没有，有什么更好的方法来处理这个问题？

angular.module('test').factory('myFactory', function ($) {
    var size = 0;

    return {
        setSize: function (value) {
            size = value;
        },
        styles: {
            width: size + "px"
        }
    };
});

angular.module('test').directive('testDirective', ['myFactory', function (myFactory) {
    return {
        restrict: 'EA',
        link: function (scope, ele) {
            ele.css(myFactory.styles);
        }
    };
}]);

Answer 1

link 函数仅在将指令添加到 DOM 时运行一次。我假设您故意不想使用此指令向 DOM 添加元素，因此我建议您尝试类似的操作：

angular.module('test').directive('testDirective', ['myFactory', function (myFactory) {
  return {
    restrict: 'EA',
    link: function (scope, ele) {
      scope.$watch(function () {
        return myFactory.styles;
      }, function (newValue) {
        ele.css(newValue);
      }, true);
    }
  };
}]);

Answer 2

您的 size 变量是原始变量，因此当您更改它时，您的宽度属性不会更新。 styles.width 值只会是工厂初始化时的值。

更改 setSize() 函数以实际更新 styles.width

 setSize: function (value) {
    this.styles.width = value + 'px';
  }

现在共享此属性的任何范围也将更新

Answer 3

检查工作演示：JSFiddle（结合charlietfl和Exo的答案）。

在工厂里，把styles改成一个对象：

angular.module('test', [])
    .factory('myFactory', function () {
    var styles = {
        width: 100 + 'px'
    };

    return {
        setSize: function (value) {
            styles.width = value + 'px';
            console.log(styles);
        },
        styles: styles
    };
})

然后$watch指令中的对象link函数：

scope.$watch(function () {
    return myFactory.styles;
}, function (newValue) {
    ele.css(newValue);
}, true);

如何将从工厂返回的对象绑定到元素上的方法？

How do you bind an object returned from a factory to a method on an element?

angularjs

angularjs-directive

angularjs-factory