Angular js in Dynamically create controls - javascript

In my application one block is loaded with the controls dynamically. After loading the dynamic controls the data is update by using the angular js. But the angular js is working with static placed controls. But not with dynamic controls.
Here I placing the dynamic code What I tried to get.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ren").html('<p>Name: <input type="text" ng-model="name"></p>');
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<div id="ren"></div>
<p ng-bind="name"></p>
</div>
<button>click</button>
</body>
</html>
Here the input control dynamically added to the div. The text I enter in control does not appering on paragraph. But this work fine if the input control place in div static.
Am I doing any wrongly. please solve my problem.

Probably your html attached via jquery function, is not registered to angular's watch tree. as a result, it doesn't trigger a digest cycle when you type to input with ng-model. Also this kind of usages angular with jquery in the dom edition level is not recommended. In my opinion, you should use directive instead of that jquery-dom operation

I'd prefer to do it in angular way, rather than mixing jQuery with angular. Because directly adding DOM to angular context will not worked as angular compiled DOM(means angular binding will not work on newly injected DOM). You need to compile that DOM with $compile service with specific scope before injecting it into DOM to enable binding on it.
Lets follow this way, which is fully angular way of doing it. There would be ng-click directive on the button, and will toggle a flag to show and hide element & we will render that array using ng-if
HTML
<p>Input something in the input box:</p>
<div id="ren">
<p ng-if="showName">Name: <input type="text" ng-model="name"></p>
</div>
<p ng-bind="name"></p>
</div>
<button type="button" ng-click="showName!=showName">click</button>

Related

How do I add Angular functionality to newly-added HTML?

I have an HTML page with Angular. I want to click a button that adds an Angular input tag to the DOM. But when I do so, the new input text field does not seem to work the way I would expect it.
My HTML looks like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
});
$(function(){
$("#button").click(function(){
$("body").append("<input type=\"text\" ng-model=\"bar\"><br>{{bar}}");
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button">click me</button>
<input type="text" name="something" ng-model="foo"><br>
{{foo}}
</body>
</html>
I can use Angular's functions just fine when with the input tag already there. When I type something in the text field, the output appears. But when I click the button and the new input text field comes up, typing in it does nothing.
What am I missing?
How do I fix this?
You can't mix JQUERY and Angular in the way you are doing it. You have to choose one framework and stick to its principles.
In order to add a control the "View" in angular you could use "Directives". Another options is to have an object in your Model and the chances to this object will interact with your controller and this will inform the View to add another control.
Angular is an MVC framework therefore you should not manipulate the View(html) through another framework. Angular was meant to fix and simplify this manipulations with a proper separation or layers.
You can refer to this other post on how to perform this:
How to dynamically add input rows to view and maintain value in angularjs ng-model as array item
To do it in AngularJS:
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="showBarInput=true">click me</button>
<div ng-show="showBarInput">
<input type="text" ng-model="bar"><br>
{{bar}}
</div>
<input type="text" name="something" ng-model="foo"><br>
{{foo}}
</body>
The AngularJS framework is a Model-View-Whatever framework. The model drives the view. In this case, $scope.showBarInput controls the visibility of the elements.

Angular appending html with directives from within a directive

I'm trying to write a small directive that will append the validation tags and ngMessages dynamically to the input. But I'm having trouble appending the ng-message attribute to the div.
The idea is to have this,
<div validator validations="{json_data containing error messages}">
<input name='fieldName'>
</div>
Turned in to the following according to the provided JSON.
<div validator>
<input required="required"></input>
<div ng-message="fieldName" ng-if="fieldName.$dirty>
<p ng-message="required"> scope.message </p>
</div>
</div>
I've currently managed to get the ng-required appeneded using the answer to this answer. But I can't seem to append the ng-message tag using the same technique. What should be done differently to solve this issue?
The final directive should be able to generate something like this Fiddle
The current version can be found in the Fiddle here the example works as expected until 'scope' is added. But as soon as 'scope' is added, the example stops working.
Update
I've realized that this only occurse when you add a local scope. This error doesn't occure when using the global scope and accessing the variable using scope.$eval(attrs.message)

How do we set mask on a dynamically inserted input?

Since Angular-UI-Mask is acting oddly, I'm using jquery-inputmask to some of my inputs, but when an input is dynamically inserted ny Angular it gets no mask:
<li ng-repeat="item in items">
<input type="text" name="birth_date" class="span2 format_date" ng-model="birth_date" placeholder="Data de Nascimento" required />
</li>
This is the related script
<script type="text/javascript">
jQuery(document).ready(function(){
$(".format_date").inputmask("99/99/9999");
});
</script>
Is there anything I can do to force it to set the mask to new inputs?
jQuery plugins like jQuery.inputMask work by (as your code shows) attaching behaviour to DOM elements when the document is 'ready'. This will run once, and never again, so for dynamically-added content this approach doesn't work.
Instead, you need something that will run whenever the corresponding DOM is changed. So whenever an 'item' in your 'items' list is added, the element is added and the corresponding jQuery function is run against that element. You need to use AngularJS for this and you could write your own directive, but thankfully, someone has already written the code for you: the jQuery Passthrough plugin as part of Angular UI's UI.Utils.
Here is a working Plunkr.
You need to include the script at the top, like so (I downloaded it from GitHub):
<script src="ui-utils.jq.js"></script>
Load the module into AngularJS, for example:
var app = angular.module('myApp', ['ui.jq']);
And then use the directive in your HTML markup:
<input type="text" ui-jq="inputmask" ui-options="'99/99/9999', { 'placeholder': 'dd/mm/yyyy' }" />

In AngularJS, any inline javascript code that included in HTML templates doesn't work

In AngularJS, any inline javascript code that included in HTML templates doesn't work.
For Example:
main.html file:
<div ng-include="'/templates/script.html'"></div>
And script.html file:
<script type="text/javascript">
alert('yes');
</script>
When I open main page, I expect an alert message that say 'yes' but nothing happens. I think some security restrictions in the AngularJS is preventing inline scripts, but I couldn't find any workaround about that.
Note: I don't use jQuery or any other framework, only AngularJS 1.2.7.
jQlite does not support script tags. jQuery does, so the recommendation is to include jQuery if you need this functionality.
From Angular's Igor Minar in this discussion:
we looked into supporting script tags in jqlite, but what needs to be
done to get a cross-browser support involves a lot of black magic. For
this reason we decided that for now we are just going to recommend
that users use jquery along with angular in this particular case. It
doesn't make sense for us to rewrite one third of jquery to get this
working in jqlite.
Here's the related github issue jqLite should create elements in same way as jQuery where Igor sums up, before closing the issue, with this:
This is too much craziness for jqlite, so we are not going to do it.
Instead we are going to document that if you want have script elements
in ng:include or ng:view templates, you should use jquery.
demo plunker with jquery
Angular uses the $sanitize on ng-include directives which strips out scripts. A better approach for templates is to create a controller for that template.
It is better to use an individual controller for templates.
In template.html
<form role="form" ng-controller="LoginController">
<input type="text" placeholder="Email" ng-model="email">
<input type="password" placeholder="Password" ng-model="password">
<button class="btn btn-success" ng-click="login()">Sign in</button>
</form>
In the LoginController you can use whatever code you want
angular.module('myApp.controllers', []).
controller('LoginController', [function() {
alert('controller initialized');
}])
The event triggered when ng-include adds content is $includeContentLoaded. Your scripts should be included in this event:
For example (Plucker Demo):
function SettingsController($scope, $window) {
$scope.template={};
$scope.template.url = "demo.html";
$scope.$on('$includeContentLoaded', function(event){
$window.alert('content load');
});
}
Additionally you can set an init function using the onload attribute:
html
<div ng-include="template.url" onload="alertMe()" > </div>
</div>
Controller
$scope.alertMe=function(){
$window.alert('sending alert on load');
}
Include jQuery and change order of the angular.js and jquery.js. jQuery must be first, otherwise it does not work

Binding an event after a page reload and creating new html element using Knockout.js, HTML and JS only?

I am new to knockout libraries and we are working on an iPad web app. The situation is when a user check a checkbox in a HTML page, we need to add a new div in the page with some text boxes in it and remove it when he uncheck those.
Point to be noted: the new div is binded to data that needs to be default loaded in the text box or selects.
Its an iPad web app. It uses Knockout, jQuery, JS and HTML with MVVM.
The question is, can Knockout bind html elements after the page load, as custom handler works/register themselves only during init and can a dynamic div be created using js and html, if yes then how to put it between two static divs?
You can bind elements after page load using ko.applyBindings(viewModel, ElementSelector), like so:
ko.applyBindings(myModel, $("#myDiv"));
However, this isn't something you generally want to do. It's much easier to use the If binding in Knockout, which will dynamically add or remove child elements from the page.
<input type="checkbox" data-bind='checked: showChild' />
<div id="container" data-bind="if: showChild">
<!-- stuff here will only be generated if the checkbox is selected -->
</div>
If you had multiple different elements to show based on a value of something, say a select list, you could use the template feature instead:
//viewmodel properties
self.Options = ko.observableArray(["Name", "Age", "Height"])
self.TemplateToUse = ko.observable()
//html
<select data-bind="options: Options, value: TemplateToUse">
</select>
<div data-bind='template: { name: TemplateToUse }'>
<!-- template whose name is selected value -->
</div>
//templates
<script type="text/html" id="Age">
<span>Age</span>
</script>
<script type="text/html" id="Name">
<span>Name</span>
</script>
<script type="text/html" id="Height">
<span>Height</span>
</script>

Categories