ng-if blocking the directive methods - javascript

I have a directive for Opentoke Library but it's not working when I am using the ng-if, the reason of using ng-if is for IOS devices webrtc is not supported so it's showing alert after DOM load.
<div class="opentok" ng-if="!isMobileView">
<open-tok-archive></open-tok-archive>
</div>
click me
<div class="opentok" ng-if="!isMobileView">
<open-toke-screen-share></open-toke-screen-share>
</div>
without ng-if every thing is working fine.
Direcitve
'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 ---------")
}
};
}]);

Use ng-show/ng-hide instead of ng-if.
EDITS
<div class="opentok" ng-if="!isMobileView">
<open-tok-archive></open-tok-archive>
</div>
Have a look at this plunker Demo link
Try this without ng-if #working
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.8" 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>
With ng-if it is not working
<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>

Related

How to bind HTML component with ng-repeat based on a pre-defined condition

I am very new to AngularJS. I have made an html component which is to be reused across the whole app. Let's say this component gives out the basic info of a product. The basic structure of the HTML is as below:
<div class="visible-sm-block">
<div class="row">
<div class="col-sm-2">
<img class="img-circle img-responsive" alt="Image of product"
ng-src="{{}}"/>
</div>
<div class="col-sm-10">
<label>{{ProductName}}</label>
<p>{{CompanyName}}</p>
<p>{{ShippedTo}}</p>
</div>
</div>
</div>
The product.js file goes as:
(function() {
'use strict';
angular
.module('product')
.directive('productDetails', productDetails);
/** #ngInject */
function productDetails() {
var directive = {
restrict: 'E',
templateUrl: 'app/components/productDetails/productDetails.html'
};
return directive;
}
})();
The small HTML component would be reused across other HTML pages in the app like this:
<product-details></product-details>
Now the problem is I cannot bind data with the HTML component when it is used across my pages. The controller for those pages is in a separate folder: app/productshipping/productshipping.controller.js
I tried using ng-controller="controller_name" in the HTML component itself but no result came. :( Please help.
This is really an interesting question. The code is given below. I am developing an angular framework. So do let me know if you need any further assistance.
Product.js file as follows
"use strict";
angular.module("app",[]);
angular.module("app").controller("productController", ['$scope', function ($scope) {
}]);
angular.module("app").directive("tmHtml", function () {
return {
transclude: false,
scope: {
productName: '#',
companyName: '#',
shippedTo: '#'
},
controller: "productController",
templateUrl: "/templates/HideShow.html"
};
});
Template HTML file as follows
<html ng-app="app">
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/bootstrap.js"></script>
</head>
<body ng-controller="productController">
<div class="visible-sm-block">
<div class="row">
<div class="col-sm-2">
<img class="img-circle img-responsive" alt="Image of product" ng-src="{{}}" />
</div>
<div class="col-sm-10">
<label>{{productName}}</label>
<p>{{companyName}}</p>
<p>{{shippedTo}}</p>
</div>
</div>
</div>
</body>
</html>
How to reuse this as follows
<html ng-app="app">
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../js/Product.js"></script>
</head>
<body>
<div>
<tm-Html product-Name="Sankar" company-Name="Sankar" shipped-To="Sankar">
</tm-Html>
</div>
</body>
</html>

AngularJS tutorial not binding data

I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller

Angular JS - Load a template html from directive on click of a button

I am trying to load a HTML template when a link is clicked. I have made a directive that contains templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in index.html. whatever i have done so far is shown below, but it doesn't work.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div id="d"></div>
</div>
</body>
</html>
script.js
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.showdiv = function(){
$("#d").append("<div my-Customer></div>");
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
})(window.angular);
my-customer.html
<p>DIV CONTENT</p>
Here is the link i was testing this code here
This is because the angular doesn't bind the directives if you append content like this,
you need to $compile service to do this and this will bind the directives against your $scope
so controller like,
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var compiledeHTML = $compile("<div my-Customer></div>")($scope);
$("#d").append(compiledeHTML);
};
}])
here is the DEMO
OR good to do like this,
use ng-if to create or removing element from html,
try this code
Controller,
....
$scope.anableCustomerDirective = false;
$scope.showdiv = function(){
$scope.anableCustomerDirective = true;
};
HTML
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div id="d">
<div my-Customer ng-if='anableCustomerDirective'></div>
</div>
</div>
</body>
Suggestion
if your main intention is to place a html content after the click, then you can use ng-include here and it will much cleaner and no need of a another directive.
<div id="d">
<div ng-include="templateURL"></div>
</div>
$scope.showdiv = function(){
$scope.templateURL = 'my-customer.html';
};
find the DEMO
Seems like directive is only meant to load template from it.I'd suggest you to use ng-include directive then
Markup
show
<div id="d"></div>
<div ng-include="showDiv ? 'my-customer.html': ''">
The most common way is to use $compile. More info: Dynamically add directive in AngularJS
Then your controller may look like this:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var el = $compile( "<div my-customer></div>" )( $scope );
$('#d').append( el );
};
}]);
Note that the directive invokation should look like this: <div my-customer>, not <div my-Customer></div> as you have in your code.
when you do it manually with append you actually do not run $apply or $digest so the directive is not run,
can you try to do it with ng-show or ng-if ... e.g
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div my-customer ng-if="showdiv"></div>
<div id="d"></div>
</div>
</body>
this way angular runs the $apply and the directive will be rendered.

angular directive template not loading

my angular directive template is not getting loaded into my app. The js file for the directive is loading fine except the html. I checked the 'net' tab in firebug and its not getting called there either. I am currently not getting any errors.
Here is my directive js:
angular.module('Grid')
.directive('grid', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
templateUrl: 'scripts/grid/grid.html'
}
});
Here is my directive html:
<div id="game">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div>
<div class="tile-container">
<div tile ng-model="tile" ng-repeat="tile in ngModel.tiles track by $index"></div>
</div>
finally here is my index.html where it is meant to go
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="styles/game.css" />
<script type="application/javascript" src="scripts/libraries/angularjs.js" ></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/game/game.js"></script>
<script type="application/javascript" src="scripts/grid/grid.js"></script>
<script type="application/javascript" src="scripts/grid/grid_directive.js"></script>
</head>
<body ng-app="twentyApp">
<!-- header -->
<div class="container" ng-include="'views/main.html'"></div>
<!-- script tags -->
<div id="game-controller">
<div grid ng-model="ctrl.game" class="row"></div>
</div>
</body>
</html>
This has app is being broken up into multiple modules as the new recommended structure for angular
The grid module needs to be a dependency of your twentyApp module.
angular.module('twentyApp', ['grid'])
Are you sure that the Grid module is being loaded?
Try this:
angular.module('Grid', [])
.directive('grid', function() {

how to create a directive with select and button

I have created a directive which should be able to call a function in a controller and use a variable in controller and directive.
I can not figure out how to call the callback.
I can not figure out to enable two way data binding on my directive scope variable.
Here is the plnk: http://plnkr.co/edit/T1bMYUnkPeZmHHd05SCI?p=preview
html
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body data-ng-controller="BodyCtrl">
<h1>{{title}}</h1>
<div class="container">
<div class="dateselector" data-ng-select="select" data-ng-refresh="refresh()"></div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular-route.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
html template
<div class="row">
<div class="col-md-3 col-sm-3">
<select class="form-control" ng-model="select" ng-options="p for p in possibilities"></select>
</div>
<div class="col-md-3 col-sm-3">
<button type="button" class="btn btn-default">Refresh</button>
</div>
</div>
javascript
var app = angular.module('App', ['ui.select']);
app.controller('BodyCtrl', ['$scope', function($scope) {
$scope.title = 'Select Directive';
$scope.select = 1;
$scope.refresh = function() {
alert("Refresh in Controller! " + $scope.select);
};
}]);
// Module
angular.module('ui.select', [])
.directive('dateselector', ['$parse', function($parse) {
var link = function ($scope, $element, $attributes) {
$scope.possibilities = [1,2,3,4,5,6];
$element.find('button').bind('click', function() {
alert('Refresh in directive!');
// How to call callback?
$scope.refresh;
});
};
return {
restrict: 'EC',
replace: true,
templateUrl: 'template.html',
scope: {
select: "=",
refresh: "&"
},
link: link
};
}]);
The basic problem is that your directive expects to see and attribute of the form some-name or data-some-name, but you specify one like this: data-ng-some-name.
Additionally, the recommended way to bind a callback to a button's click event is using ngClick.
<!-- In the VIEW -->
<div class="dateselector" data-select="select" data-refresh="refresh()"></div>
<!-- In the TEMPLATE -->
<button ... ng-click="refresh()">Refresh</button>
See, also, this modified demo.

Categories