Question

我是Angular的新手，并试图找到解决问题的方法。

我有一个列表项创建为partial.html，我需要在不同的页面中导入此partial.html。但是此列表对于不同的页面应该具有不同的活动状态。像菜单栏一样的东西。

<ul class="list-group">
  <li class="list-group-item active">Item 1</li>
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
  <li class="list-group-item">Item 4</li>
</ul>

但是当我在不同页面中使用ng-include导入此列表时如何更改活动类以使其在另一个项目上。

 <ng-include src="'partial.html'"></ng-include>

例如：

如果我将partial.html导入Demo-page-1.html，则项目1应具有活跃的课程。
再次，如果我将partial.html导入Demo-page-2.html，则第2项应该有活跃的课程

这有可能实现吗？另外，对于您的信息，我不是在做一个页面应用，所以我有多个页面。任何信息/帮助将不胜感激。

Answer 1

在我正在研究的项目中，我们有几乎相同的问题 - 一个带有一些下拉菜单的主页面，但是通过从这些下拉菜单中选择的任何内容修改了一些部分内容。

我们所做的是创造了我喜欢称之为“服务传递黑客”的内容。这样做的方式是滥用引擎盖下的服务是单身的事实。

从服务开始：

(function () {
    'use strict';

    angular.module('app').factory('someSvc', [someSvc]);

    function someSvc () {
        return {
           // Variables, functions...
        };
    }
})();

...然后，在我们的控制器中，我们都将服务作为依赖项包含在内，但也暴露了它......

(function () {
    'use strict';

    angular.module('app').controller('someCtrl', ['someSvc', someCtrl]);

    function someCtrl(someSvc) {
        var vm = this;
        vm.someSvc = someSvc;
        // Other instance variables...

        // Other functions...
    }
})();

然后，我们将标记引用到我们在控制器上创建的服务传递：

<body ng-controller='someCtrl as vm'>
    <select ng-model='vm.someSvc.someProperty' />

    <div ng-include='somePartial.html'></div>
</body>

这是一个好的和坏的混合包。

好的：

你正在按照预期使用单身人士 - 引入全球范围，从而允许不同的部分人愉快地合作。
JavaScript如何处理给定的子值（引用或值）不再重要 - 因为服务是一个对象，它将始终通过引用传递。
通常，在服务和控制器之间传递值，您必须告诉服务和控制器在特定时间共享值，可以通过执行赋值运算符或通过调用某种方法来同步状态。在此设置中，因为服务是控制器的公开属性，所以您不必执行任何。

糟糕：

你正在使用单身人士时期 - 引入全球范围。这有维护后果。
你有点绕过控制器;您的一些业务逻辑现在将在您定义的服务中结束，以引入该全局范围，从而增加维护问题。
您正在使用一个巨大的对象引用 - 您更改的任何内容都将影响其他使用上下文。小心。

在我的团队的情况下，由于JavaScript如何处理不同的隐式'类型'（基元通过值传递，对象和数组通过引用传递），我们必须使用此路由。虽然它可以工作，但维护起来会很有趣。

我高度建议您考虑是否可以修改您应用的特定体系结构，以便您仍然可以使用部分，但不必执行我在此处显示的服务传递黑客。

更改通过角度ng-include导入的列表项的活动状态

1 个答案: