Question

我正在尝试使用Angular为我的标准角度模块生成一个教程模块（向用户展示如何使用UI的东西，因为我们的一些用户是需要一些帮助的老人）。这样做时，我希望本教程能够访问主应用程序并控制所有内容。到目前为止，我可以将数据添加到模型中，并且main可以毫无问题地吞下它，这使得为解释添加模拟数据变得非常容易。

也就是说，当用户点击元素或与他们交互时，我不想向服务器发送任何请求，因为这是一个教程，假的，模拟，所以我想至少禁用标准行为教程元素并添加我自己的元素（可能，转到教程的下一步）。

但我不想在模型上使用指令或布尔值，如“isThisTutorial”或“isTutorialOn”，因为我想隔离教程并使其独立于主，我不想要主项目需要知道关于教程的任何内容，除了我为激活它而进行的调用。

我以为我可以尝试使用jQuery访问元素并覆盖行为，但它似乎不起作用，因为Angular仍然有控件（或者我可能做错了）。所以，考虑到我可以访问相同的范围，我可以随意修改模型，如何从主控制器中使用我的教程模块控制器获取UI控件？这可能吗？

感谢。

更新说明我发现jQuery确实有效，唯一的问题是Angular尚未消化模型上的新数据，所以当我尝试访问它时，该元素还没有在DOM上。即便如此，也可以选择其他选择。

Answer 1

你想要完成的事情是相当复杂的，据我所知（已经有一段时间了，因为我一直在寻找），没有开箱即用的框架（有一些js页面演练here周围的框架是一个完成此类控件的框架，尽管有些框架会屏蔽UI以阻止用户控件。
那就是说，对于你提出的具体挑战，这里有几个选择：

就防止实际服务器请求而言，您始终可以模拟这些服务（或$ http资源本身）。 Here它是为测试目的而完成的，但您显然可以将其用于其他目的，例如您的。最棒的是，您可以准确控制返回的内容，因此如果教程用户创建导致实体的创建，您可以精确控制该实体的外观并使其适合您的教程。这也意味着它完成了教程的第二步 - 无需对它做任何事情。
如果你正在使用其他方法（例如jQuery AJAX，则有相同的方法）。
就事件处理而言，您实际上可以覆盖某些角度的构建指令（或任何您自己的指令）并注入教程的某些特定逻辑 - 即 - 防止单击并仅允许特定点击，引入弹出窗口一些事件等。
Here是覆盖ngClick的一个例子。
您还可以装饰角度（或您的）服务并注入您自己的逻辑，这可以帮助拦截行为Here是一个简单的装饰器，而Here是为您创建事件总线的另一个复杂示例应用程序，然后可以用作事件的标志通知程序（可以帮助解耦应用程序的不同部分）。

为了聚合这些方面，我将创建一个仅在教程模式下进行的教程模块。

Answer 2

嗯，我最终得到的解决方案可能不是最好的，但可以分享它，因为它可以帮助其他人：

首先，我可以将模拟数据添加到UI上显示的模型，但在访问DOM之前，我需要等待Angular生成元素并将其添加到那里。所以我使用了角度。$ apply：

    $scope.Conversations.push(mockData);
    $scope.$apply();

这在控制台上显示错误：“错误：[$ rootScope：inprog] $已经在进行中”但是它可以正常工作，但不是这样。

现在，在那之后我可以访问DOM元素，我可以通过使用document.getelementById或者我有jQuery来获取它，只需要一个选择器$（“＃myId”）。一旦我拥有了该元素，我只需要告诉Angular“放开它”，将其解除绑定：

function RemoveAngularBounds(object) {
    angular.element(object).unbind();
}

现在，再次使用jQuery，我可以向它添加一个“click”事件，并确定它覆盖Angular给它的新行为。

    var target = $("#myId");
    RemoveAngularBounds(target);
    $(target).click(function (e) {
        //e.stopImmediatePropagation();
        //e.preventDefault();
        $scope.step2();
    });

我曾经以为我需要阻止传播并防止默认，但即使如此，也不要将它留在那里，因为它可能有助于某人。

其余的只是在UI周围向用户显示一些浮动消息。如果您需要停用并重新激活元素上的角度行为，我认为您可以尝试使用.bind（），但需要检查它。

超越另一个模块对Angular中UI的控制

2 个答案: