Question

这是我现在的代码：

var app = angular.module("MyApp", []);

app.controller("ctrl", function($scope) {
        $scope.slides = [{
            title: "Slide 1"
        },{
            title: "Slide 2"
        }];
        $scope.clicked = {title: "undefined slide"};
});

app.directive("scroller", function() {
  return {
    template: "<div slide ng-click='click()' ng-repeat='slide in slides'></div>"
  };
});

app.directive("slide", function() {
  return {
    template: "{{slide.title}}",
    controller: function($scope) {
        // controller
        $scope.click = function() {
            // Tell parent I was clicked
        }
    },
    link: function(scope, element, attrs) {
        // link
    }
  };
});

我希望主控制器中的clicked成为点击的slide。

$scope.clicked = $scope.slide

由于重复范围，

显然不起作用。

双向数据绑定不起作用，因为这会为元素创建一个seconde范围，因此slide指令的模板将停止工作。

我知道

$scope.$parent.clicked = $scope.slide;

可行，但我想要求更好的解决方案，因为我不喜欢像这样访问父作用域。

有人可以帮我这个吗？也许播放点击的项目？提前谢谢。

Answer 1

您可以使用指令的'require'选项。此选项用于指定控制器需要另一个控制器才能正常工作。

您的代码应如下所示：

var app = angular.module("MyApp", []);

app.controller("ctrl", function($scope) {
        $scope.slides = [{
            title: "Slide 1"
        },{
            title: "Slide 2"
        }];
        $scope.clicked = {title: "undefined slide"};

        this.slideClicked = function(slide){
            $scope.clicked = slide;
        };
});

app.directive("scroller", function() {
  return {
    template: "<div>{{clicked.title}}</div><div slide ng-click='click(slide)' ng-repeat='slide in slides'></div>",
    controller: 'ctrl'
  };
});

app.directive("slide", function() {
  return {
    template: "{{slide.title}}",
    require: '^scroller',
    controller: function($scope) {
        // controller
        $scope.click = function(slide) {
            $scope.containerController.slideClicked(slide);
        }
    },
    link: function(scope, element, attrs, controllers) {
        scope.containerController = controllers;        

        // link
    }
  };
});

这是https://jsfiddle.net/60zbpvau/1/

Answer 2

您还可以将信息存储在$scope属性的属性中。为子控件创建$scope时，其属性将被浅层复制。

在父控制器中单击ng-repeat项

2 个答案: