JSfiddle
I am trying to add mdKeyBoard to dynamically created element, It works for textarea present in DOM, but not for the one which added through javascript.
Tried to $compile also still of no use.
var myApp = angular.module('myApp', ['ngAria', 'ngAnimate', 'ngMaterial', 'material.components.keyboard']);
myApp.controller('MyCtrl', function($scope,$compile) {
setTimeout(function () {
$compile(angular.element(document.getElementById('idTextArea')))($scope);
}, 1000);
});
//JS-library
var textarea = document.createElement('textarea');
textarea.setAttribute('autocapitalize', 'off');
textarea.setAttribute('use-keyboard', 'US International');
textarea.setAttribute('id', 'fabricTextArea');
document.getElementById('myDiv').appendChild(textarea);
<link href="https://cdn.rawgit.com/davidenke/angular-material-keyboard/9365d06c/dist/mdKeyboard.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/davidenke/angular-material-keyboard/9365d06c/dist/mdKeyboard.js"></script>
<div id="myDiv" ng-app="myApp" ng-controller="MyCtrl">
<md-input-container>
<textarea type="text" id='text_tool' aria-label='demo'
use-keyboard='US International'
ng-model="WBCtrl.textFieldValue">
</textarea>
</md-input-container>
</div>
The use of setTimeout is a code smell, a symptom of a more fundamental problem. In AngularJS DOM manipulation should be done in directives. Avoid doing DOM manipulation in controllers.
To dynamically add elements in AngularJS use the ng-if directive:
<textarea ng-if="addTextarea" autocapitalize='off'
use-keyboard='US International' ng-model="fabricValue"
id='fabricTextArea' >
</textarea>
In the controller, use $scope.addTextarea=true to have the AngularJS framework dynamically add the element.
The DEMO
The use-keyboard directive needs the ngModelController which is instantiated by the ng-model directive.
var myApp = angular.module('myApp', ['ngAria', 'ngAnimate', 'ngMaterial', 'material.components.keyboard']);
myApp.controller('MyCtrl', function($scope,$compile) {
setTimeout(function () {
$compile(angular.element(document.getElementById('fabricTextArea')))($scope);
}, 1000);
});
//JS-library
var textarea = document.createElement('textarea');
textarea.setAttribute('autocapitalize', 'off');
textarea.setAttribute('use-keyboard', 'US International');
textarea.setAttribute('id', 'fabricTextArea');
textarea.setAttribute('ng-model', 'xxx');
document.getElementById('myDiv').appendChild(textarea);
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons">
<link href="//unpkg.com/angular-material-keyboard/dist/mdKeyboard.css" rel="stylesheet"/>
<link href="//unpkg.com/angular-material/angular-material.css" rel="stylesheet"/>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-material/angular-material.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-aria/angular-aria.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-material-keyboard/dist/mdKeyboard.js"></script>
<div id="myDiv" ng-app="myApp" ng-controller="MyCtrl">
<md-input-container>
<textarea type="text" id='text_tool' aria-label='demo'
use-keyboard='US International'
ng-model="WBCtrl.textFieldValue">
</textarea>
</md-input-container>
</div>
Related
I am new to Angular.JS. I am struggling last 6 hours.
I read the data from HTTP and send back to the view as a autocomplete state. Previously it was a select box. I decided to change to autocomplete from a select box.
Plunker Link: http://embed.plnkr.co/MbhALuekWNDqnYFyjbOF/
Here have to return two values. One is ID and another one is the description. Because user going search by description. but have to return back ID of the respective user selection.
Error:
angular.min.js:124 TypeError: elem.autocomplete is not a function
at Object.link (main.js:217)
at angular.min.js:17
at wa (angular.min.js:85)
at q (angular.min.js:71)
at f (angular.min.js:62)
at q (angular.min.js:71)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62)
at f (angular.min.js:62) "<input client-complete="" class="form-control ng-pristine ng-untouched ng-valid" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">"
(function (angular) {
'use strict';
var app = angular.module('myApp', [ 'ngAnimate', 'ui.bootstrap', 'ngTable', 'ngResource']);
app.directive('clientComplete',['$filter',clientCompleteDir]);
app.controller('AccountMappingCtrl', ['$scope', '$http', 'NgTableParams', AccountMappingcontroller]);
function AccountMappingcontroller($scope, $http, NgTableParams) {
//-------------------------------------------------------------------------------------------------
var vm = this;
vm.client ={COMPANY_ID:'', COMPANY_DESC:''};
/* $http.get("http://localhost:52087/api/companydetails").then(function(response) {
var convertToJson = angular.fromJson(response.data);
$scope.dataSource = convertToJson;
}); */
$scope.dataSource = [{'COMPANY_ID':'10001','COMPANY_DESC':'THIRDROCK','COMPANY_CURRENCY':'AUS','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'},{'COMPANY_ID':'10002','COMPANY_DESC':'OBN TECH','COMPANY_CURRENCY':'INR','ACTIVE':true,'IS_HEADOFFICE':true,'ACCOUNTING_SYSTEM_ID':'1'}];
$scope.setClientData = function(item){
if (item){
vm.client = item;
}
}
} //controller
//directive
function clientCompleteDir($filter) {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
elem.autocomplete({
source: function (request, response) {
//term has the data typed by the user
var params = request.term;
//simulates api call with odata $filter
var data = scope.dataSource;
if (data) {
var result = $filter('filter')(data, {COMPANY_DESC:params});
angular.forEach(result, function (item) {
item['value'] = item['COMPANY_DESC'];
});
}
response(result);
},
minLength: 1,
select: function (event, ui) {
//force a digest cycle to update the views
scope.$apply(function(){
scope.setClientData(ui.item);
});
},
});
}
};
}
})(angular);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Account Mapping Maintenance </title>
<!-- Bootstrap -->
<link href="./vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="./vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="./build/css/custom.min.css" rel="stylesheet">
<link href="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
</head>
<body class="nav-md" ng-app="myApp" ng-controller="AccountMappingCtrl as vm">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_DESC" placeholder="enter name" type="text">
<input client-complete class="form-control" ng-model="vm.client.COMPANY_ID" placeholder="enter name" type="hidden">
<!-- Angular CDN -->
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular-route.min.js"></script>
<script src="https://unpkg.com/ng-table#4.0.0/bundles/ng-table.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<!-- jQuery -->
<script src="./vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="./vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="./vendors/fastclick/lib/fastclick.js"></script>
<!-- Custom Theme Scripts -->
<script src="./build/js/custom.min.js"></script>
<script src="./Controller/main.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>
You need first to load jquery, than jquery-ui and than angular to eliminate that error:
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link data-require="jquery-ui#1.11.2" data-semver="1.11.2" rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script data-require="jquery-ui#1.11.2" data-semver="1.11.2" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.6.6/angular.js"></script>
Here is small working plunker with one input for filtering source data, hoppefuly it will make easier for you to continue: plunker
(start typing THIRDROCK)
I have a textbox which is connected to angular js with ng-model=sampleValue
Now, my requirement is whenever I click on the button show function should be executed and the textbox's value should be changed to Harish. But this is not the result I'm getting. Please take a look at the code that I have written below:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp">
<input ng-controller="mainController" type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Thank you in advance :)
Currently you had applied ng-controller over input element, which means controller scope has restricted on input DOM only, because of which show method would not get call. You should move ng-controller to wrapper element(here its body).
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue" />
<button ng-click="show()">Click Here</button>
</body>
Plunker
Move ng-controller to body tag:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Put ng-controller in body or in some parent div. You are using ng-controller in input type
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCtrl', function myCtrl($scope,$filter) {
$scope.showValue = function(){
$scope.sampleValue = "Harish";
}
})
</script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="sampleValue"/>
<button ng-click="showValue()">Click Here</button>
</body>
</html>
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
your ng-controller is on the input
The fact is you used ng-controller over input tag. so outside of the input tag inside controller function will not work. your js is totally ok. u just need to change the html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" >
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Ang</title>
</head>
<body>
<div ng-app="">
<h1>Ng-show ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
</body>
</html>
Try executing the above code you may get an idea for you code.
Your controller scope is limited to input text box.
<body ng-app = "myApp">
<div ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</div>
</body>
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>
I am trying to create an interactive experience using angular js. I was wondering if I could create properties, assign objects then instantiate them in a script tag in the 'index.html'?
for example
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = {
test1: function() {
return "My name is slim shady"
}
}
}]);
index.html is as follows
<!doctype html>
<html>
<head>
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<script> document.write(barry.test1)</script>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
Then instantiate the {{ Barry }} with all the properties in a script tag in the index.html.
Is there a better way to approach this e.g using directive or factories
P.S I am new to angular js any guidance would be appreciated.
There is no need for instantiating in HTML.It will automatically instantiate once declared in controller. And to Get that value in index.html you can use ng-model for binding.
var app = angular.module('myApp');
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Barry Bounce';
$scope.barry = [
{test1:'"My name is slim shady"'},
];
}
}]);
<!doctype html>
<html>
<head>
HTML
<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<span ng-model="barry.test1"> </span
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
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() {