gpt4 book ai didi

AngularJS ngInclude 动态改变它的位置

转载 作者:行者123 更新时间:2023-12-03 08:16:43 26 4
gpt4 key购买 nike

我有一些部分模板,其中位置通过 ng-click 根据用户操作进行更改:

<div ng-include="contentUrl"></div>

<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>

这很好用,除非我上面的按钮在部分本身内部,所以如果 testScriptForm.html 有一个按钮:
<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>

然后什么也没有发生。

这似乎是由于 ng-include 获得了一个新的(继承但不共享?)范围。

我想不通的是如何让包含的模板(部分)改变它自己的位置。

我确实尝试了一个函数来更改 $scope.$parent.contentUrl,它似乎确实发生了变化,但没有“传播”这些变化。

在 CoffeeScript 中:
  $scope.changeParentLocation = (location) ->
$scope.$parent.contentUrl = location

还尝试在那里 $scope.$apply() 和 $scope.$parent.$apply() 并得到错误:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.0rc1/$rootScope/inprog?p0=%24apply



也许我只是误用了包括...

最佳答案

使用“虚线模型”引用转义隔离范围:

<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="script.js"></script>

<script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html">
<h1>This is testScriptForm.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button>
</script>

<script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html">
<h1>This is testScriptCase.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button>
</script>

</head>
<body>

<div ng-controller="Ctrl">

<fieldset>
<div ng-include="tpl.contentUrl"></div>
</fieldset>

</div>

</body>
</html>
function Ctrl($scope) {
$scope.tpl = {};
$scope.tpl.contentUrl = '/partials/testScriptForm.html';
}

关于AngularJS ngInclude 动态改变它的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19045125/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com