个人中心
gpt4 book ai didi

javascript - AngularJS - 通过服务从指令更新 Controller 数据(this.model 语法)

转载 作者：行者123 更新时间：2023-12-03 11:31:42 25 4
gpt4 key购买 nike

我正在尝试从指令更新存储在 Controller (this.isUploaded)中的数据(我想将更新绑定(bind)到 DOM 元素上的操作(在本例中，在我的应用程序中单击，在通过拖放上传文件))。根据我所读到的内容，最好的方法是注入(inject)一个服务，该服务将充当具有数据绑定(bind)的应用程序的两个部分之间的桥梁。我使用的整个代码如下(受到此 post 的启发，它不适用于指令):

<body>
  <div ng-controller="navController as navCtrl">
    <p>isUploaded: {{navCtrl.isUploaded}}</p>
    <div test-view></div>
  </div>
</body>

对于 JavaScript:

angular.module('testApp', [])
  .directive('testView', ['CreateBindingService', function(createBindingService) {
    return {
      restrict: 'EA',
      template: '<a href="#">Incrementation</a>',
      link: function(scope, element, attrs) {
        element.bind('click', function(e) {
          createBindingService.incrementIsUploaded();
          console.log(createBindingService.getIsUploaded());
        });
      }
    };
  }])
  .factory('CreateBindingService', function() {
    var isUploaded = 1;
    return {
      getIsUploaded: function() {
        return isUploaded;
      },
      incrementIsUploaded: function() {
        isUploaded++;
        return isUploaded;
      }
    };
  })
  .controller('navController', ['CreateBindingService', function(createBindingService) {
    this.isUploaded = createBindingService.getIsUploaded();
  }]);

日志的行为确实符合预期(每次点击增量都会更改存储在服务中的值)，但模型中的值不会更新。

我试图看一下 $watch，但到目前为止，什么都没有发生，所以它似乎更像是一个绑定(bind)问题，而不是更新问题。

可能是因为我使用了 this.isUploaded 而不是 $scope.isUploaded 吗？事实上，我见过的大多数帖子都使用后者，而我则使用前者(我在 Code School 上学习了 Angular 的基础，他们不使用 $scope)。

我确实知道有更简单的方法来做到这一点(在这种情况下，这是显而易见的，甚至我的“花哨”拖放文件上传也可能被一种更简单的指令所取代。但是，我仍然认为获得问题的答案将帮助我更好地理解 Angular 的工作原理。

但是，如果您提出一种完全不同的方法来解决问题，我很感兴趣:)

最佳答案

看来绑定(bind)事件是在 Angular 范围之外的，因此您可以在指令内使用它的scope.$apply。并将 isUploaded 更改为复杂类型，请参见下面的演示。

angular.module('testApp', [])
  .directive('testView', ['CreateBindingService',
    function(createBindingService) {
      return {
        restrict: 'EA',
        template: '<a href="#">Incrementation</a>',
        link: function(scope, element, attrs) {
          element.bind('click', function(e) {
            scope.$apply(function() {
              createBindingService.incrementIsUploaded();
              console.log(createBindingService.getIsUploaded());
            });
          });
        }
      };
    }
  ])
  .factory('CreateBindingService', function() {
    var data = {
      isUploaded: 1
    };
    return {
      getIsUploaded: function() {
        return data.isUploaded;
      },
      incrementIsUploaded: function() {
        data.isUploaded++;
        return data;
      },
      data: data
    };
  })
  .controller('navController', ['CreateBindingService',
    function(createBindingService) {
      this.data = createBindingService.data;
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="testApp">
  <div ng-controller="navController as navCtrl">
    <p>isUploaded: {{navCtrl.data.isUploaded}}</p>
    <div test-view></div>
  </div>
</body>

关于javascript - AngularJS - 通过服务从指令更新 Controller 数据(this.model 语法)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26704287/

25 4 0
文章推荐： javascript - Angular 更新绑定(bind)配置
文章推荐： rust - 有没有一种方法可以使用Serde定义标签字段？
文章推荐： rust - 为什么不能在同一结构中存储值和对该值的引用？
文章推荐： javascript - 动态改变 Backbone 模型
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com