Область не обновляется при использовании ng-click внутри компонента - PullRequest
Новая
       30

Область не обновляется при использовании ng-click внутри компонента

0 голосов
/ 22 февраля 2019

У меня проблема с тем, что моя область не обновляется при использовании ng-click внутри компонента.Область также не обновляется, если я использую $ scope. $ Apply или $ timeout, поэтому я не уверен, в чем проблема.

Идея состоит в том, что когда я нажимаю на вторую кнопку в моем компоненте (qdcPopover.html), то $ scope.showGetData должен быть обновлен до true, что затем обновит div в моем index.html.

Вот мой код:

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();
    }
})

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Это очень простой пример, я немного испортил имена функций и функциональные возможности, так что это, вероятно, не то, что вы хотели, а просто пример.

Из документов Кажется, что области действия компонентов всегда изолированы, поэтому даже с одним и тем же контроллером у вас фактически есть 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>
0 голосов
/ 22 февраля 2019

Как вы можете видеть здесь для метода $ scope. $ Apply требуется параметр для выполнения, попробуйте это: 

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

Или, возможно, вы находитесь не в нужной области,это весь твой код?Вы даже не ссылались на angular.js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...