Javascript 如何在JS中从服务向HTML公开值_Javascript_Angularjs

Javascript 如何在JS中从服务向HTML公开值

javascript angularjs

Javascript 如何在JS中从服务向HTML公开值,javascript,angularjs,Javascript,Angularjs,我有一个AngularJS服务，其中我编写了按钮点击功能的逻辑——设置超时3秒，以便在点击按钮后显示弹出窗口 $timeout工作正常，因为我在控制台中看到了输出。我不能做的是在ng if条件下公开HTML模板中的timeoutFlag 有人能告诉我这里缺少什么吗。谢谢你的帮助服务控制器 HTML 因为click事件来自AngularJS执行上下文之外，范围的修改需要通过$apply方法引入AngularJS执行上下文：只有在AngularJS执行上下文中应用的操作才会受益于Angula

我有一个AngularJS服务，其中我编写了按钮点击功能的逻辑——设置超时3秒，以便在点击按钮后显示弹出窗口

$timeout工作正常，因为我在控制台中看到了输出。我不能做的是在ng if条件下公开HTML模板中的timeoutFlag

有人能告诉我这里缺少什么吗。谢谢你的帮助

服务

控制器

HTML

因为click事件来自AngularJS执行上下文之外，范围的修改需要通过$apply方法引入AngularJS执行上下文：

只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定、异常处理、属性监视等

有关详细信息，请参阅

我仍然无法在ng if条件下基于$rootScope.timeoutFlag值显示弹出窗口

删除HTML中对$rootscope的引用：

<body ng-controller="appController as vm">

  <p ng-if=" ̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶ timeoutFlag">Button Clicked</p>

  <button id="clickmeBtn">Click me!</button>

控制器的作用域从$rootScope继承属性

我希望这是一个任意的例子，你不打算这样编写你的应用程序。单击处理程序应该添加指令，并且应该避免对状态数据使用$rootScope。是的，这只是为了说明目的。感谢详细的帖子。我按照建议更改了服务代码，但仍然无法根据ng if条件下的$rootScope.timeoutFlag值显示弹出窗口。

(function() {
  angular.module('myApp', []).controller('appController', appController);
  appController.$inject = ['$scope', '$rootScope', 'appService'];

  function appController($scope, $rootScope, appService) {
    var vm = this;
  }
})();

<!doctype html>
<html ng-app="myApp">

<body ng-controller="appController as vm">

  <p ng-if="$rootScope.timeoutFlag">Button Clicked</p>

  <button id="clickmeBtn">Click me!</button>

  <script src="node_modules/angular/angular.min.js"></script>
  <script src="scripts/app.controller.js"></script>
  <script src="scripts/app.service.js"></script>
</body>

</html>

angular.module('myApp').service('appService', appService);
appService.$inject = ['$rootScope', '$timeout'];

function appService($rootScope, $timeout) {

  button = document.getElementById('clickmeBtn');
  button.addEventListener('click', function() {

    $rootScope.$apply(function() {
       $rootScope.timeoutFlag = true;
    });
    console.log('service before timeout - ' + $rootScope.timeoutFlag);
    $timeout(function() {
      $rootScope.timeoutFlag = false;
      console.log('service after timeout - ' + $rootScope.timeoutFlag)
    }, 3000)
  });
}

<body ng-controller="appController as vm">

  <p ng-if=" ̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶.̶ timeoutFlag">Button Clicked</p>

  <button id="clickmeBtn">Click me!</button>