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

Failure to trigger Summernote's OnImageUpload function

After transitioning to the latest version of Summernote, which is Version 7, I encountered a problem with the image upload functionality. Despite specifying the line onImageUpload: function(files) {sendFile(files[0]);}, it seems that this code is not being ...

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

Replicate a click using jQuery to retrieve a filtered multigallery based on the URL

I have a website that was built using Elementor for a photographer. The site features an Elementor Multigallery with a filter at the top. I am looking to create external links that will direct users to specific subpages showing only filtered items. For ex ...

The ng-model value does not display in Angular 1.4.14 <input> after adding an item in ng-repeat loop

I'm facing an issue with the ng-model in ng-repeat of InvoiceLines: - After adding a new Invoice Line for the first time, I type some characters in the ng-model and the input value displays correctly. The InvoiceLines now has 1 line. - However, af ...

What are some strategies for optimizing Next.js applications for mobile devices?

https://i.stack.imgur.com/mWmWG.png After realizing that the structure of my Next.js app doesn't align with Create React App's folder system, I'm stuck on how to effectively scale my website for mobile devices. In my confusion, I'm una ...

Guide on how to load just the content section upon clicking the submit button

Here is an example of my code: <html> <head> <title>Test Loading</title> </head> <body> <div id="header"> This is header </div> <div id="navigation" ...

Accessing the web3 attribute from the React-Web3 provider to enhance functionality

I'm struggling to understand the basic functionality of react-web3-provider My component structure is as follows: import React, { Component } from "react" import { withWeb3 } from 'react-web3-provider'; import Web3 from 'web ...

Using TypeScript for Immutable.js Record.set Type Validation

Currently, I'm utilizing Immutable.js alongside TypeScript for the development of a Redux application. In essence, the structure of my State object is as follows: const defaultState = { booleanValue: true, numberValue: 0, } const StateRecord = ...

The feature of option display is not supported on Safari browser

I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...

What is the best way to align a box once another one has been placed?

I have integrated both Bootstrap and Masonry plugins into my website design. The issue I am facing is that the Masonry plugin box goes under the top Bootstrap bar. I tried adding a margin-top: 50, but this resulted in a horizontal scroll bar appearing. To ...

When using NodeJS, having multiple 'if' statements may result in conflicting headers being returned,

Introduction to Promises. Encountering challenges in NodeJS due to the utilization of multiple if-statements and return-statements. Considering leveraging Promise as a potential solution. This snippet showcases an example: const express = require(' ...

Determining the value of an object property by referencing another property

Upon running the code below, I encounter the following error message: Uncaught TypeError: Cannot read property 'theTests' of undefined $(document).ready(function() { var Example = {}; Example = { settings: { theTests: $(&apo ...

Should we enable client-side validation and unobtrusive JavaScript in the Web.config file?

I'm currently working on an ASP MVC application, where all form and UI code is written in AngularJS for validation purposes. I didn't use any HTML helpers. Do I need to include the entries ClientValidationEnabled and UnobtrusiveJavaScriptEnabled ...

Error message related to the callback type issue in Node.js with the http.createServer

Having recently embarked on my journey with node.js, I delved into various tutorials and encountered a stumbling block while attempting to refactor some code. The tutorial that caught my attention and led me to this hiccup can be found here: http://www.tu ...

I encounter issues with my fetch request as it is denied while attempting to access the HTML content from the specified

I'm currently working on a project in my express app where I need to retrieve the html code of multiple urls. However, I keep encountering this error: reject(`new FetchError(request to ${request.url}` failed, reason: ${err.message}, 'system' ...

Learn the steps to dynamically show a navbar component upon logging in without the need to refresh the page using Angular 12

After logging in successfully, I want to display a navbar on my landing page. Currently, the navbar only shows up if I reload the entire page after logging in. There must be a better way to achieve this without a full page reload. app.component.html <a ...

What is the proper way to connect an external Javascript file to an html document within a Play Framework project?

Below is the content of my scala.html file: @() <!DOCTYPE html> <html> <head> <title> Spin To Win </title> <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/styles.css")" ...

JSF CommandLink malfunctions on Firefox when reRendering an entire form

I am currently working on a JSF 1.2 application (Sun RI, Facelets, Richfaces) that was previously designed only for IE6 browsers. However, we now need to extend our support to include Firefox as well. On one of the pages, there is a form with a button tha ...

Is the contenteditable feature working properly when updating PHP, SQL, and AJAX in the network?

Struggling with updating modified text to SQL using PHP and Ajax. Unsure if the issue lies in the data sent through Ajax or a problem within the PHP script. Below is my snippet from the HTML file: <tr> <td class="editingTab" contenteditable=&ap ...

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...