使用 AngularJS 指令、工厂和 ng-repeat 动态更改内容

Question

我正在开发一个小部件，只要我单击相应的按钮，它就会动态更改其内容。我花了很多时间来解决这个问题，但我做不到。

我已经存储了 angular 工厂提供的所有数据。我想要实现的是，每当我单击一个按钮时，它都会触发一个事件以获取另一个属性，这也是工厂数据中的另一个数据集。并且这些会用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，因为您正试图将新数据绑定到 angular 上下文范围之外。

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;
     });
    ...
    ...
   });
  },
 };
}]);

使用 AngularJS 指令、工厂和 ng-repeat 动态更改内容

Dynamically changing content with AngularJS directive, factory, and ng-repeat

javascript

jquery

directive

angularjs

ng-repeat