0

我是 AngularJS 的新手，已经处于绝望的边缘 :) 我的应用程序看起来像这样（Plnkr 上的不工作示例）：

HTML

<div ng-app="myApp" ng-controller='controllers.content' >
  <h2 id="fixed">{{ header }}</h2>
  <ul>
    <li ng-repeat="item in db" scroll-stop="item">{{ item.name }}</li>
  </ul>
</div>

JS

angular.module('myApp.controllers',[]);
var app = angular.module('myApp', [
    'myApp.controllers'
]);

var app = angular.module('myApp.controllers').controller('controllers.content', ['$scope', function($scope){
    $scope.db = [
      { name: "20 February 2014", header: "Today" },
      // ...
    ];
    $scope.header = "Today";
}]);

现在基本上我想要一个滚动间谍，只要该项目当前位于视口的顶部，h2它就会将（假设它固定到顶部）的内容更改为项目的header属性：db

app.directive('scrollStop', function() {
   return {
        restrict: 'A',
        scope: {
          scrollStop:'='
        },
        link: function (scope, element, attrs) {

            var $page = angular.element(window)
            var $el   = element[0]
            var last_top = $el.getBoundingClientRect().top - 60;
            $page.bind('scroll', function () {
                var current_top = $el.getBoundingClientRect().top - 60;
                if (last_top >= 0 && current_top < 0) {
                    // HERE!
                    console.log(scope.scrollStop.header);
                    scope.header = scope.scrollStop.header;
                }
                last_top = current_top;
            })

        }
    }
});

但是，我不知道如何从指令中与content控制器对话以从指令中进行编辑 $scope.header。我知道这scope与控制器的不同$scope，并且有一种模糊的感觉，我应该在require某处使用，但无法弄清楚如何正确使用它。部分还因为在 AngularJS 中做任何事情似乎有 5 种不同的速记，而且它们并不总是能很好地结合在一起。任何帮助表示赞赏，包括风格指导。

4

1 回答 1

2

您正在为您的指令使用隔离范围。所以你不能访问范围控制器。您可以使用服务或使用事件与控制器通信。

如果您希望能够直接从指令访问控制器范围，则必须使用共享范围。

我希望它有所帮助。您可以在此处的指令中找到有关范围的更多信息。

- - - - - -编辑 - - - - - - - -

我不确定你想做什么，但在下一个代码中你可以看到使用共享范围，你可以从父级访问数据并使用新数据刷新视图。

angular.module('app').directive('scrollStop', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {

            var $page = angular.element(window)
            var $el   = element[0]
            var last_top = $el.getBoundingClientRect().top - 60;
            $page.bind('scroll', function () {
                var current_top = $el.getBoundingClientRect().top - 60;
                if (last_top >= 0 && current_top < 0) {
                    // HERE!
                    scope.$parent.header=scope[attrs.scrollStop].header;
                    scope.$parent.$apply();
                }
                last_top = current_top;
            })

        }
    }
});
于 2014-02-20T18:25:29.417 回答