Scope Not Updating When Using ng-click Within a Component

Question

I have the issue that my scope is not updating when using ng-click within a component. The scope also does not update if I use $scope.$apply or $timeout so I am not sure what the issue is.

The idea is that when I click on my second button within my component (qdcPopover.html) that $scope.showGetData should be updated to true which will then update the div within my index.html.

Here is my code:

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 (component)

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

Note that you shouldn't use $apply like this without parameter, and in your situation it's a bit useless as its use is to make actions done outside of angular go back into angular digest cycles, and in your case you're not outside of angular — Kaddath
– Kaddath, Commented Feb 22, 2019 at 8:48
Yup the first time I wrote this I did not use $scope.apply at all but then after searching for an answer to my problem I found only examples where this was used so I thought I would give it a try. — Riley MacDonald
– Riley MacDonald, Commented Feb 22, 2019 at 9:09

nano · Accepted Answer · 2019-02-22 14:40:35Z

0

As you can see here the $scope.$apply method needs a parameter to execute, try this:

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

Or maybe you are not in the right scope, is this all your code? You haven't even referenced angular.js

edited Feb 22, 2019 at 14:40

answered Feb 22, 2019 at 9:04

nano

5056 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riley MacDonald Over a year ago

I have tried this before as well and just tried it again but it is still not working

Kaddath · Accepted Answer · 2019-02-22 09:59:02Z

This is a very simple example, i messed up a bit the function names and functionalities so that is probably not what you intended, but it's just an example.

From the docs it seems that components scopes are always isolated, so even with the same controller, you actually have 2 different instances. There are examples with using require to communicate between components but couldn't get it to work.. (doc is a bit sparse there).

However something that works fine is by using a service. The service shares the data between all instances of you controller.

Hope that helps, good luck!

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

Collectives™ on Stack Overflow

Scope Not Updating When Using ng-click Within a Component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related