在组件中使用 ng-click 时范围未更新答案

【问题标题】：Scope Not Updating When Using ng-click Within a Component在组件中使用 ng-click 时范围未更新
【发布时间】：2019-07-16 07:17:38
【问题描述】：

我的问题是在组件中使用 ng-click 时我的范围没有更新。如果我使用 $scope.$apply 或 $timeout，范围也不会更新，所以我不确定问题是什么。

这个想法是，当我单击我的组件 (qdcPopover.html) 中的第二个按钮时，$scope.showGetData 应该更新为 true，然后它将更新我的 index.html 中的 div。

这是我的代码：

index.html：

<html lang="en" qva-bootstrap="false">
<head>
  <title>Data Prep</title>
  <script data-main="data-prep" src="/resources/assets/external/requirejs/require.js"></script>
</head>
<body>
  <div ng-controller="AppCtrl as ctrl">
    <button id="qdpCreateApp" class="lui-button  lui-button--rounded">Create App</button>
    <qdp-popover></qdp-popover>
    <div>Hello {{showGetData}} + {{showAppCreate}}</div>
  </div>
</body>
</html>

qdpPopver.html（组件）

<div ng-show="showAppCreate" class="lui-popover" style="width: 400px;">
  <div class="lui-popover__header">
    <div class="lui-popover__title">{{qdpPopover.title}}</div>
  </div>
  <div class="lui-popover__body">
    {{qdpPopover.body}}
    <input id="{{qdpPopover.inputId}}" ng-show="qdpPopover.showInput" class="lui-input"/>
  </div>
  <div class="lui-popover__footer">
    <button class="lui-button  lui-popover__button" ng-click="showAppCreate = false">{{qdpPopover.button1}}</button>
    <button class="lui-button  lui-popover__button" ng-click="createApp()">{{qdpPopover.button2}}</button>
  </div>
</div>

data-prep-module.js

// define the angular module with its controller
var app = angular.module('qlikDataPrepModule', []);

// define angular components
app.component('qdpPopover', {
    templateUrl: 'qdpPopover.html',
    controller: 'AppCtrl'
})

var qdpAppNameInput = "qdpAppNameInput";
// Controller
app.controller('AppCtrl', function ($scope, $location, $http, $timeout) {
    $scope.qdpPopover = {
        title: "Create new App",
        body: "Name of my app:",
        button1: "Cancel",
        button2: "Create",
        showInput: true,
        inputId: qdpAppNameInput
    };
    $scope.showGetData = false;
    $scope.showAppCreate = false;

    // Function for app creation
    $scope.createApp = function () {
        $scope.showGetData = true;
        $scope.$apply();
    }
})

【问题讨论】：

请注意，您不应该在没有参数的情况下像这样使用$apply，并且在您的情况下它有点没用，因为它的用途是使在角度之外完成的动作回到角度摘要周期，并且在你的情况下，你不在角度之外
是的，我第一次写这篇文章时，我根本没有使用 $scope.apply，但是在搜索了我的问题的答案之后，我只找到了使用它的示例，所以我想我会给出它试一试。

标签： javascript html angularjs angularjs-scope angularjs-components

【解决方案1】：

如你所见here $scope.$apply 方法需要一个参数来执行，试试这个：

$scope.createApp = function () {
    $scope.$apply(function () {
        $scope.showGetData = true;
    });
}

或者也许您不在正确的范围内，这就是您的全部代码吗？你甚至没有引用 angular.js

【讨论】：

我以前也试过这个，只是又试了一次，但还是不行

【解决方案2】：

这是一个非常简单的例子，我把函数名称和功能搞砸了，所以这可能不是你想要的，但这只是一个例子。

从the docs 看来，组件范围始终是隔离的，因此即使使用相同的控制器，您实际上也有 2 个不同的实例。有使用require 在组件之间进行通信但无法使其工作的示例..（那里的文档有点稀疏）。

但是，使用服务可以正常工作。该服务在控制器的所有实例之间共享数据。

希望对你有帮助，祝你好运！

// define the angular module with its controller
var app = angular.module('qlikDataPrepModule', []);

// define angular components
app.component('qdpPopover', {
    template: `<div ng-show="getShowAppCreate()" class="lui-popover" style="width: 400px;"><div>Hello {{getShowGetData()}} + {{getShowAppCreate()}}</div>
  <div class="lui-popover__header">
    <div class="lui-popover__title">{{qdpPopover.title}}</div>
  </div>
  <div class="lui-popover__body">
    {{qdpPopover.body}}
    <input id="{{qdpPopover.inputId}}" ng-show="qdpPopover.showInput" class="lui-input"/>
  </div>
  <div class="lui-popover__footer">
    <button class="lui-button  lui-popover__button" ng-click="showAppCreate(false)">{{qdpPopover.button1}}</button>
    <button class="lui-button  lui-popover__button" ng-click="showGetData(true)">{{qdpPopover.button2}}</button>
  </div>
</div>`,
    controller: 'AppCtrl',
})

var qdpAppNameInput = "qdpAppNameInput";
// Controller
app.controller('AppCtrl', function ($scope, $location, $http, dataService) {
    $scope.qdpPopover = {
        title: "Create new App",
        body: "Name of my app:",
        button1: "Cancel",
        button2: "Create",
        showInput: true,
        inputId: qdpAppNameInput
    };

    // Function for app creation
    $scope.showGetData = function (val) {
        dataService.showGetData = val;
    }
    $scope.getShowGetData = function () {
        return dataService.showGetData;
    }
    
    // Function for show popover
    $scope.showAppCreate = function (val) {
        dataService.showAppCreate = val;
    }
    $scope.getShowAppCreate = function () {
        return dataService.showAppCreate;
    }
})

app.factory('dataService', function(){
    var data = {};
    
    data.showGetData = false;
    data.showAppCreate = false;
    
    return data;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<html lang="en" qva-bootstrap="false">
<head>
  <title>Data Prep</title>
  <script data-main="data-prep" src="/resources/assets/external/requirejs/require.js"></script>
</head>
<body ng-app="qlikDataPrepModule">
  <div ng-controller="AppCtrl as ctrl">
    <button id="qdpCreateApp" class="lui-button  lui-button--rounded" ng-click="showAppCreate(true)">Create App</button>
    <qdp-popover></qdp-popover>
    <div>Hello {{getShowGetData()}} + {{getShowAppCreate()}}</div>
  </div>
</body>
</html>

【讨论】：