Получить щелкнул нг-повторить пункт в родительском контроллере

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, его свойства неглубоко копируются.