在组件中使用ng-click时，范围不会更新

问题描述 投票：2回答：2

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

我的想法是，当我点击我的组件中的第二个按钮（qdc Popover.html）时，$ scope.show GetData应该更新为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>

数据制备型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();
    }
})
javascript html angularjs angularjs-scope angularjs-components
2个回答
-1
投票

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

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

然而，一些正常工作是通过使用服务。该服务在您的控制器的所有实例之间共享数据。

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

// 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>
0
投票

正如你可以看到here $ scope。$ apply方法需要一个参数来执行，试试这个：

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

或者你可能不在合适的范围内，这是你的所有代码吗？你甚至没有引用angular.js

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.