个人中心
gpt4 book ai didi

javascript - 在 ngRepeat 内部时，如何从 Angular 中的指令向 $scope 添加新属性

转载 作者：行者123 更新时间：2023-11-28 08:00:20 25 4
gpt4 key购买 nike

我在 ng-repeat 中有一个指令。该指令生成一个唯一命名的属性，并将其设置为从服务器以 JSON 形式检索的对象。我将在给定页面上有多个 ng-repeat 部分，其中包含我的自定义指令。

在此页面的主 Controller 中，我需要响应这些指令中的事件并更新页面上的其他元素。我无法完全控制事件(它们是第三方控件)，因此我无法真正修改它们的参数或任何内容。该指令创建的属性包含我需要从 Controller 中获取的信息，以便决定如何响应它们。

当我在主 Controller 上触发事件时，我在 $scope 上看不到这些新属性。如果我将元素移出 ng-repeat 我确实会看到它们。我的指令没有使用隐藏范围。

这是我正在做的事情的简单版本:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  <script>
    var app = angular.module('TestApp', []);


    app.controller('TestController', ['$scope', function($scope) {
      $scope.list = [];
      $scope.list.push({ sample: "item" });
      console.log('controller called');
      $scope.doSomething = function() {
        console.log('doSomething called');
        console.log($scope["myVariable"]);
        $scope.list = [];
        $scope.list.push({ sample: "item" });
      };
    }]);

    app.directive('testDirective', ['$http', function ($http) {
      return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrib) {
          var setValue = function() {
            scope["myVariable"] = "TEST!" + Date();
            console.log('myVariable is set.'); 
          };

          setValue();
        }
      };
    }]);
  </script>
  </head>

  <body ng-app="TestApp">
    <div ng-controller="TestController">
      <div >
        <div ng-repeat="item in list" >
          <a href="#" test-directive ng-click="doSomething()">Click</a>  
        </div>

      </div>

    </div>
  </body>

</html>

这里是 Plunker 上的相同代码

您能帮助理解为什么会发生这种情况吗？

我从这里的其他问题中看到了两种可能的解决方案 - 一，我可以创建一个由该指令共享的 Controller 。这并不是很理想，因为我需要能够以不同的方式连接这些指令。其次，我发现我可能可以使用一个服务来共享这些数据，因为它是一个单例，但这有点困扰我 - 我真的更喜欢它保持在这个 Controller /范围的“本地”(但我可能没有选择)关于这一点)。

最佳答案

您不应直接访问指令中的父范围项。传入要设置或修改的变量。

scope: {
  'testDirective': '='
},
link: function (scope, element, attrib) {
  var setValue = function() {
    scope.testDirective = "TEST!" + Date();
    console.log('myVariable is set.'); 
  };

  setValue();
}

该属性中应始终有一个点。

<a href="#" test-directive="data.myVariable" ng-click="doSomething()">Click</a>

现在可以在 Controller 上使用 data.myVariable

Plunkr

关于javascript - 在 ngRepeat 内部时，如何从 Angular 中的指令向 $scope 添加新属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25512112/

25 4 0
文章推荐： ios - 表中的 UISwitch 在切换状态打开时选择多个单元格
文章推荐： ios - UINavigationController 有两个代表？
文章推荐： HTML 电子邮件模板居中
文章推荐： javascript - 选择
行者123
个人简介

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

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