Question

我正在使用angularjs建立一个网站。我有一些特定于内容的标签，即它们有自己的内容。单击选项卡时，只显示其内容。每个选项卡都在控制器中被赋予一个ID。我想监视选项卡ID中的更改，并相应地更改选项卡的内容。我该怎么做？

我已阅读ng-bind。当表达式更改时，它将使用提供的表达式的结果替换指定div的内容。换句话说，它监视表达式并使用该表达式的结果更新div。

我想要类似的功能，但我不希望div的内容被该表达式替换（例如我的标签中的标签ID）。我只是希望使用md-tab-body中加载的其他内容更新div。

这有什么指示吗？

Answer 1

您可以在控制器的$ scope（或控制器本身，如果使用'controller as'语法）上引用属性。然后angular会自动$ watch该属性进行更改并自动更新视图。

控制器

$scope.tabContent = 'Some text content';

-

HTML

<div>{{tabContent}}</div>

Answer 2

您可以使用ng-include指令。如下所示：

<div ng-repeat="tab in tabs">
    <div ng-include src="tab.src" ></div>
</div>

标签可以是对象数组

    $scope.tabs=[{
     id: 'tab1',
     src: 'content1' // tab1 content
    },{
     id: 'tab2',
     src: 'content2' // tab2 content
    }
     ... 
    ]

当表达式的值发生变化时更新div

2 个答案: