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
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>
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
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.
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() {
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.