Question

我遇到的问题是，在组件内使用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();
    }
})

Answer 1

您可以看到here $ scope。$ apply方法需要一个参数才能执行，请尝试以下操作：

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

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

Answer 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>

在组件内使用ng-click时范围未更新

2 个答案: