Only show the directive methods when using "ng-if"

I am facing an issue with the Opentoke Library directive, particularly when I use the ng-if. The reason for implementing the ng-if is that WebRTC is not supported on IOS devices, so it displays an alert after the DOM has loaded.

<div class="opentok" ng-if="!isMobileView">
  <open-tok-archive></open-tok-archive>
</div>

<a href="javascript:void();" ng-click="myMethod()">click me</a>

<div class="opentok" ng-if="!isMobileView">
  <open-toke-screen-share></open-toke-screen-share>
</div>

Everything works fine without using ng-if.

Directive

'use strict';
var session, apiKey, publisher, openTokToken, archiveID;

angular.module('app')
  .directive('openTokArchiv', [function () {
    return {
      restrict: 'EA',
      templateUrl: 'views/pages/openTokArchive.html',
      controller: function (OpenTokService, OTSession, $window, $rootScope, $scope, $routeParams, $cookieStore) {


      $scope.myMethod = function (){
               console.log("---------not-- working ---------")
           }
    };
  }]);

Answer №1

Consider using ng-show/ng-hide instead of ng-if.

UPDATES

  <div class="opentok" ng-if="!isMobileView">
    <open-tok-archive></open-tok-archive>
  </div>

Check out this plunker for a demonstration Demo link

Test it without ng-if #working

<!DOCTYPE html>
<html>

  <head>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c6c9c0d2Cbcccbcfc9fec8cfd9db89c4c8ca">@MYVYDDFF@@@@@@</a>" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

    <body ng-app="app" ng-controller="myCtrl" ng-init="variables">
      <div class="opentok">
        <open-tok-archive></open-tok-archive>
      </div>

      <button type="button" ng-click="myMethod()">Toggle</button>

    </body>

</html>

Does not work with ng-if

<body ng-app="app" ng-controller="myCtrl" ng-init="variables">
  <div class="opentok" ng-if="!isMobileView">
    <open-tok-archive></open-tok-archive>
  </div>

  <button type="button" ng-click="myMethod()">Toggle</button>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to incorporate Bootstrap's datepicker into a website?

I'm currently working on an AngularJS application. Here is the code I have: <directive date="date" date-format="YYYY-MM-DD" > <input ng-model="Date" type="text"/> </directive> Is there a way to integrate an Angu ...

Having trouble with the express-stormpath login feature for users who have authenticated with their email?

As I run a basic node.js/Express server with express-stormpath for user authentication, everything runs smoothly without email verification. However, email verification is essential for various reasons; nevertheless, my email-verified users face issues whi ...

The npm copy script is not functioning properly on the Windows 8.1 operating system

I am working on a sapui5 project and I need to execute the following npm script from my package.json: "scripts": { "flatten": "copy -r \\dist\\resources\\test\\commonjslib\\* dis ...

Unable to trigger jQuery .click event

Having recently delved into the world of AJAX, jQuery, and JavaScript, I am facing a challenge that I believe is rooted in a simple oversight on my part. Expressing this issue can be quite perplexing, but I'll do my utmost to articulate it clearly. I ...

Adding a listener to an element within a loop

I'm currently exploring a way to add an event listener in my script. Here's the variable I have: var inputs = data.context.find(':input').not(':button'); Following that, I have a FOR loop where I utilize this variable to ap ...

What is the process of utilizing an npm package as a plain JavaScript library through require and module export?

Hey there, I'm a bit unsure if I'm on the right track with my question, but here it goes: What steps do I need to take to modify a node.js package for use as a standalone embedded script/library in HTML? How can I invoke a class constructor in ...

Add a new value to the translation token using ng-bind

I'm attempting to loop through an element 5 times using ng-repeat and track by $index. Following that, I aim to utilize the value from $index to supplement a translation token. This appended index value corresponds with the token which retrieves the a ...

Utilize a display value while maintaining the v-model binding in Vue.js

Can't seem to figure this one out. I'm using Quasar Framework, but it seems like more of a Vue issue. I have a multiple-select UI component with a list of objects as options that I want to display. The v-model will bind to the currently selected ...

There is an issue with the function of elem.autocomplete - it is not recognized

I'm new to Angular.JS and have been struggling for the past 6 hours. I've been working on reading data from an HTTP source and displaying it as an autocomplete feature on the view. Previously, the data was displayed in a select box, but I decide ...

What is the reason behind the varying display of values?

When trying to set a value using the input tag, I encountered an issue. For example, if I type 1000.0009 into the input text, the valid value should be 1000.0001. However, the value displayed in the input tag is incorrect, while the value outside the tag i ...

"Step-by-step guide for incorporating a mask in the Ant Design Datepicker component in React

Could someone help me figure out how to add a mask in the antd datepicker and validate it to ensure the correct date format (dd/mm/yy)? Here is the code I have attempted: <FormItem label="Date of Birth"> {getFieldDecorator("dob", {rules: [{ require ...

The error encountered with react createRef was caused by a faulty implementation

Here is the revised question post completing the answer In this particular code snippet, I have encountered an issue where my file browser opens correctly upon submission, however, the updated state is not reflected when I click the final submit button. ...

Locate the next element with the same class using jQuery across the entire document

I'm working with the following HTML: <section class="slide current"></section> <section> <div class="slide"></div> <div class="slide"></div> </section> <section class="slide"></section> ...

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

Retrieving data from various endpoints using React JS

Here is the code snippet to fetch contents from my Django server: However, I also need to fetch from another URL: I am unsure how to achieve this. Any assistance would be greatly appreciated. useEffect(() => { fetch("http://127.0.0.1:8000/api/con ...

The loop is being controlled but the data is not being added and shown in the HTML div

I am struggling to display JSON data in an HTML div using a for loop. While my control is entering the loop, the data is not being appended and displayed in the HTML div. Here is the JSON data: [{"id":"15","FirstName":"ranjan","MiddleName":"","LastName": ...

Using the timer function to extract data within a specific time frame - a step-by-step guide

Is there anything else I need to consider when the temperature increases by 1 degree? My plan is to extract data from my machine for the last 30 seconds and then send it to my database. set interval(function x(){ If(current_temp != prev_temp){ if((c ...

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

Every time I attempt to load the table, I encounter an error

Encountering errors when attempting to load the table: 'Uncaught ReferenceError: usersArray is not defined at loadUsers (trgames.js:20:17) at trgames.js:22:1' and 'Uncaught TypeError: Cannot set properties of null (setting ...

Preventing input in one textbox if another textbox has a filled value in HTML

Apologies for asking this question, but is there a way to disable one text box if another text box has a value? I've attempted using the following code, but it doesn't seem to work. Sorry for the inexperienced inquiry T_T function disableTextbox ...