如何使用带参数的AngularJS函数在其他地方更改文本?

时间:2015-04-08 16:48:55

标签: angularjs

好吧所以我发现了我正在尝试完成的任务可能是我的解决方案:使用某种切换功能我已经看到在Stack Overflow上的其他问题中表示了几种不同的方式。然而,我的一些特殊情况似乎无法弄清楚如何调整以使其发挥作用。

这是需要出现文字的手风琴:

<div ng-controller="Ctrl">
  <accordion id="myID">
    <accordion-group heading="My Heading">
      {{toggleText}}
    </accordion-group>
  </accordion>
</div>

需要出现的文字取决于所点击的内容:

<area ng-repeat="x in Object" alt="{{x.name}}" title="" ng-click="thisClick(x.name,x.address);toggle = !toggle" shape="poly" coords="{{x.htmlcoords}}" />

我的图像上有热点。我使用ng-click="thisClick(x.name,x.address)"轻松捕获来自我的对象的数据,并且我能够在thisClick(name,address)函数中提醒它。这部分HTML是在一个div中,它分别调用与上面相同的控制器,我不知道这是否相关。在尝试切换之前我无法使代码工作,除非我将控制器保持在原来状态并再次调用它。无论如何,现在要应用切换功能,我尝试将ng-click更改为上面显示的内容,并将功能更改为:

$scope.thisClick = function(name,address){
    $scope.toggle = true;
    $scope.$watch('toggle',function(){
        $scope.toggleText = $scope.toggle ? '' : name+address;
    });
};

最终,名称和地址不会被挤压在一起,但这仅用于测试目的。

当我运行代码时,根本没有发生任何事情。

有没有办法清理它或者完全不同地接近它?我希望我提供了足够的信息。

我希望它如此简单:

<area ng-repeat="x in building" alt="{{x.name}}" title="" ng-click="thisBuilding = x.name+x.address" shape="poly" coords="{{x.htmlcoords}}" />

$scope.buildingName = name;
        $scope.buildingAddress = address;
        $scope.thisBuilding = function(){
            return $scope.buildingName + " " + $scope.buildingAddress;
        };
    };

{{thisBuilding()}}

1 个答案:

答案 0 :(得分:0)

这听起来很像范围问题。当ng-repeat为每个项目创建一个新的子范围时,很可能最终会在“错误”范围内设置$scope.toggleText属性,即不在{{1}的范围内你试图显示属性的地方。

您可能希望使用某些Angular检查器工具,例如ng-inspector来验证这一点。

如果问题确实是accordion-group属性以错误的子范围结束,则一种可能的解决方法可能是在根范围内为该属性引入容器对象。这可能起作用的原因是对象作为子作用域的引用传递,而不是像原始属性那样的副本。关于这个主题的更多内容可以从Understanding Scopes article in AngularJS wiki中读取。

所以,从控制器toggleText开始沿着这些方向:

Ctrl

然后在html模板中:

// inside the controller code:
// initialize the toggleContainer object
$scope.toggleContainer = {};

最后在<div ng-controller="Ctrl"> <accordion id="myID"> <accordion-group heading="My Heading"> {{toggleContainer.text}} </accordion-group> </accordion> </div> 函数中,将您想要的值存储到属性thisClick而不是简单toggleContainer.text

toggleText