Question

我有许多带有指令的元素，名为scrollOffset，例如

<section id="section1" scrollOffset="100">
...
</section>

<section id="section2" scrollOffset="100">
...
</section>

为了便于理解，我希望能够从属于我应用程序中任何模块的任何容器中访问scrollOffset属性的值，如果我知道元素id。

我的第一个问题是如何正确地声明指令，因为我已经看到了很多方法，例如

var myScroller = angular.module('scrollOffset', []);

myScroller.directive('scrollOffset', function ( $rootScope ) {

    return function (scope, element, attr) {
        var offset = scope.$eval(attr.scrollOffset);
    }   
});

我宣布一个包含各种控制器的独立模块。我希望能够访问这些控制器中的scrollOffset属性

var myControllers = angular.module ( 'myControllers', ['scrollOffset'] ); 

myControllers.controller('controller1',  [ '$scope', '$rootScope', '$routeParams',

function ( $scope, $rootScope, $routeParams ) {

    if ( $routeParams.scrollTo != 'undefined' ) {

        // get the target element
        var targetEl = document.getElementById ( $routeParams.scrollTo );

        // I want to fetch the scrollOffset attribute for targetEl here
    }
}]);

我是Angular的新手，无法想出这个。部分问题在于，我认为有很多方法可以解决这个问题。

Answer 1

任何时候你需要多个地方的东西，你会想要使用依赖注入。对于此示例，最简单的方法是在模块上使用value函数。像这样：

myScroller.value("offsets", {});

然后，您可以在需要的地方注入offsets对象。在指令中，您可以在其上设置值：

myScroller.directive('scrollOffset', function ( $rootScope, offsets ) {

    return function (scope, element, attr) {
        var offset = scope.$eval(attr.scrollOffset);
        offsets[element.id] = offset;                
    }   
});

然后在您想要的任何控制器中，您可以从中读取值：

myControllers.controller('controller1',  [ '$scope', '$rootScope', '$routeParams', 'offsets',

function ( $scope, $rootScope, $routeParams, offsets ) {

    if ( $routeParams.scrollTo != 'undefined' ) {

        // get the target element
        var targetEl = document.getElementById ( $routeParams.scrollTo );
        // to make sure have value, use $watch
        $scope.$watch(function() {
            return offsets[$routeParams.scrollTo];
        }, function(newVal) {
            if (angular.isDefined(newVal)
            {
                 //do whatever you need to do with the value
            }
    }
}]);

如果您不希望对象本身在任何地方公开，您可以将该功能封装在具有getter / setter类型功能的服务中，然后在需要的地方注入。

将指令属性值传递给任何控制器

1 个答案: