文章/答案/技术大牛

发布

问userFlow和AngularJS？
EN

Stack Overflow用户

提问于 2022-08-04 18:19:12

回答 1查看 27关注 0票数 0

我不能让UserFlow为我们的AngularJS应用程序工作。

该产品运行在旧的AngularJS (1.8)上，我们喜欢UserFlow的概念，但是典型的注入和init模型运行在AngularJS无法访问的核心JS范围内。因此，即使在执行入职说明之后，每个注册的用户在UserFlow看来都是相同的{userId}}

我们认为正在发生这种情况(UserFlow无法像描述的那样在userflow.identify中接收用户ID )，因为用户ID在AngularJS摘要之外是不知道的。也就是说-这个方法是在一个angularJS没有生效的地方调用的，所以手键永远不会被重写。

javascript

angularjs

回答 1

Stack Overflow用户

发布于 2022-08-04 18:19:12

修好了。关于我们如何修复它的概述如下：

简单地将UserFlow的初始化分为两个不同的步骤：

userflow.init() -这可以直接在index.html中进行，也可以注入到<body>中。
userflow.identify() -这必须在您的AngularJS controller中完成

。

详细步骤

init() 1. 1. ，但要使用构建变量，并且不要使用 identify 和

在index.html中，在<body>标记的底部添加以下脚本：

<!-- UserFlow -->
        <script ng-if="customization.features.userflow">
          !function(){var e="undefined"==typeof window?{}:window,t=e.userflow;if(!t){var r="https://js.userflow.com/";t=e.userflow={_stubbed:!0};var n=e.USERFLOWJS_QUEUE=e.USERFLOWJS_QUEUE||[],o=function(e){t[e]=function(){var t=Array.prototype.slice.call(arguments);i(),n.push([e,null,t])}},s=function(e){t[e]=function(){var t,r=Array.prototype.slice.call(arguments);i();var o=new Promise((function(e,r){t={resolve:e,reject:r}}));return n.push([e,t,r]),o}},a=function(e,r){t[e]=function(){return r}},u=!1,i=function(){if(!u){u=!0;var t=document.createElement("script");t.async=!0;var n=e.USERFLOWJS_ENV_VARS||{};"es2020"===(n.USERFLOWJS_BROWSER_TARGET||function(e){for(var t=[[/Edg\//,/Edg\/(\d+)/,80],[/OPR\//,/OPR\/(\d+)/,67],[/Chrome\//,/Chrome\/(\d+)/,80],[/Safari\//,/Version\/(\d+)/,14],[/Firefox\//,/Firefox\/(\d+)/,74]],r=0;r<t.length;r++){var n=t[r],o=n[0],s=n[1],a=n[2];if(e.match(o)){var u=e.match(new RegExp(s));if(u&&parseInt(u[1],10)>=a)return"es2020";break}}return"legacy"}(navigator.userAgent))?(t.type="module",t.src=n.USERFLOWJS_ES2020_URL||r+"es2020/userflow.js"):t.src=n.USERFLOWJS_LEGACY_URL||r+"legacy/userflow.js",t.onerror=function(){u=!1,console.error("Could not load Userflow.js")},document.head.appendChild(t)}};o("_setTargetEnv"),o("closeResourceCenter"),o("init"),o("off"),o("on"),o("prepareAudio"),o("registerCustomInput"),o("remount"),o("reset"),o("setCustomInputSelector"),o("setCustomNavigate"),o("setCustomScrollIntoView"),o("setInferenceAttributeFilter"),o("setInferenceAttributeNames"),o("setInferenceClassNameFilter"),o("setResourceCenterLauncherHidden"),o("setScrollPadding"),o("setShadowDomEnabled"),o("setPageTrackingDisabled"),o("setUrlFilter"),o("openResourceCenter"),o("toggleResourceCenter"),s("endAll"),s("endAllFlows"),s("endChecklist"),s("group"),s("identify"),s("identifyAnonymous"),s("start"),s("startFlow"),s("startWalk"),s("track"),s("updateGroup"),s("updateUser"),a("getResourceCenterState",null),a("isIdentified",!1)}}();
          userflow.init('@@grunt_userflow')
        </script>

由于我们使用Grunt作为构建工具(我不建议使用Grunt，但您可以用不同的技术复制相同的模式)，所以我们将特定于环境的令牌@@grunt_userflow放入构建脚本中，以替换单个令牌以匹配相应的环境。

你会注意到我们还没有给userflow.identify()打电话..。

identify() 2.直接在控制器中执行UserFlow

当用户第一次登录时，现在需要执行userflow.identify()函数并传入正确的ID。就我个人而言，我喜欢将与AngularJS无关的函数放在控制器之外，然后将它们继承到：

const startUserFlow = function(userId, login) {
  userflow.identify(userId, {
    email: login
  });
};

现在，在AJS内部调用该函数：

$scope.processCredentials($scope.username, response.data.access_token).then(function (result) {
    trackEvent('signIn', $rootScope.userProfile.id);
    startUserFlow($rootScope.userProfile.id, $scope.username);

最后，要重新初始化您的Content**，，请在任何上使用**。

这是正确的--因为我们正在对其进行范围界定并以AngularJS的方式执行此操作，所以请像其他函数一样使用ng-click并直接绑定它。下面的例子。

$scope.launchUserFlowChecklist = function () {
    userflow.start('[insert content ID here]');
};

我希望这能帮到你!干杯。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73240634

复制

相似问题

问userFlow和AngularJS？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问userFlow和AngularJS？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问userFlow和AngularJS？
EN