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

链接功能仅在将指令添加到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);

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

3 个答案: