AngularJS 지시문, 팩토리 및 ng-repeat를 사용하여 동적으로 내용을 변경합니다.

Question

해당 버튼을 클릭 할 때마다 내용이 동적으로 변경되는 위젯 작업을하고 있습니다. 나는 이것을 이해하기 위해 1 시간의 시간을 보내고 있었지만 나는 할 수 없었다.

각도 공장과 함께 제공되는 모든 데이터를 저장했습니다. 내가 성취하고자하는 것은 버튼을 클릭 할 때마다 공장 데이터에서 또 다른 데이터 세트 인 다른 속성을 잡아 내기위한 이벤트를 발생시키는 것입니다. 그리고 이들은 ng-repeat를 사용하여 내용 상자에 표시됩니다.

귀하의 정보를 위해 아래 샘플 코드를 첨부하겠습니다. 제게 도움이 될만한 조언이나 개념을 남겨주세요. 시간 내 주셔서 감사합니다!

//index.html 
<div directive> 
<div class='buttons'> 
    <p>Button A</p> 
    <p>Button B</p> 
    <p>Button C</p> 
</div> 
<div> 
    <a ng-repeat='a in data'>{{a.title}} {{a.author}}</a> 
</div> 
</div> 
//app.js 
app.directive('directive', ['factoryData', function(factoryData) { 
return { 
    restrict: 'A', 
    link: function ($scope, ele, attrs) { 
    $scope.data = factoryData.firstProp; 
    var btns = $(ele).find('p'); 
    p.on('click', function() { 
    $scope.data = factoryData.secondProp; 
    ... 
    ... 
    }); 
    }, 
}; 
}]); 

Answer 1

당신은 당신이 각 문맥 범위에 새 데이터를 바인딩하려는 귀하의 지시에 $apply를 사용해야합니다.

app.directive('directive', ['factoryData', function(factoryData) { 
return { 
    restrict: 'A', 
    link: function ($scope, ele, attrs) { 
    $scope.data = factoryData.firstProp; 
    var btns = $(ele).find('p'); 
    p.on('click', function() { 
    $scope.$apply(function() { // use $apply to set the data..in scope 
    $scope.data = factoryData.secondProp; 
    }); 
    ... 
    ... 
    }); 
    }, 
}; 
}]);