I'm trying to add the wysiwyg nicEdit text editor to my text areas. When I goto the actual templateUrl the textbox and tool bar do work but they do not submit correctly (to my firebase db). When I goto the page that is to render the template I am unable to get get nicEdit toolbar features and just get a regular text area box. I'm using angularjs and have the templateurl as addPost.html.
So again the template does render when I goto #/addPost but not with the working nicEdit features, yet going directly to the template url addPost.html does have the nicEdit features working but then won't submit to my firebase db. Anyone have an idea on why this is so? Thanks.
Template file addPost.html:
<head>
<script type="text/javascript" language="javascript" src="../nicEdit.js"></script>
<script type="text/javascript" language="javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="blog-nav">
<a class="blog-nav-item " href="#/welcome">Home</a>
<a class="blog-nav-item active" href="#/addPost">Add Post</a>
<a class="blog-nav-item " style="cursor:pointer;" ng-click="logout();">Logout</a>
</nav>
</head>
<body ng-controller="AddPostCtrl">
<div class="container" >
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<!-- Form Name -->
<legend>Create Post</legend>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
</fieldset>
</form>
</div><!-- /.container -->
</body>
addPost.js
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}])
.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase, $location,CommonProp) {
if(!CommonProp.getUser()){
$location.path('/main');
}
$scope.logout = function(){
CommonProp.logoutUser();
}
$scope.AddPost = function(){
var title = $scope.article.title;
var date = $scope.article.date;
var post = $scope.article.post;
var firebaseObj = new Firebase("http://..");
var fb = $firebase(firebaseObj);
fb.$push({ title: title, date: date, post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path('/welcome');
}, function(error) {
console.log("Error:", error);
});
}
}]);
Going to #addPost shows the template with out nicEdit working
But going to the actual templateUrl addPost.html it works fine, minus not being able to submit
The problem has to do with trying to run scripts Angular html partials. The simple solution is to move the scripts you need to the head of your main index file, outside of ng-view, though it does seem (according to other stackoverflow posts) technically possibly to try to get these scripts to execute:
"AngularJS: How to make angular load script inside ng-include?"
https://stackoverflow.com/a/19715343/1078450
(Also, you have html in your head file that is not likely to be rendered: <nav class="blog-nav">)
Well, I have had the same problem, with initialisation of NicEdit in templates.
First I used onDomLoaded() else, but it's better to wait for the document. With jQuery I use document.ready.
Take a look here, pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
The problem is to tell NicEditor the new textarea.
Here a code sample to do this in jQuery.
var idnr = 0;
var NicEditor = new nicEditor();
$('#add').click(function(){
var $clone = $('#dummy').clone();
var id = 't_' + idnr;
idnr = idnr + 1;
$clone.attr('id',id).attr('name',id).removeClass('dummy');
$('#wrapper').append($clone);
NicEditor.panelInstance(id);
$(nicEditors.findEditor(id).elm).focus();
});
And here is a working Example of dynamic NicEdit use.
Related
While trying to render the hyper link using Angular JS it does not generate the hyper link. All other tags like <p> or <h2> work fine, but href fails.
var tempString = "<a href='tel:{mob_number}'>call me support</a>"
actual output - string is displayed but hyperlinked is not rendered. It's not clickable. Inspect page display tag generated as
<a> call me support </a>
Expected output - should display string with hyperlink.
I try to do this by 3 mood "Html, directive, bind-html"
Directive not work stackoverflow, try it on your local
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope", "$sce",
function($scope, sce) {
$scope.mob_number = "123";
var tempString = "call me support";
$scope.asHtmlTemplate = sce.trustAsHtml(tempString);
}
]);
app.directive("mobile", function() {
return {
templateUrl: "mobile.html",
scope: {
content: "#",
mobNumber: "="
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h4>simple html</h4>
<a ng-href="tel:{{mob_number}}">call me support</a>
<h4>as directive [directive not display in stackoverflow]</h4>
<mobile mob_number="mob_number" content="call me support"></mobile>
<!-- directive not display in stackoverflow ? -->
<h4>as Html template from controller</h4>
<div ng-bind-html="asHtmlTemplate"></div>
<script type="text/ng-template" id="mobile.html">
<a ng-href='tel:{{mobNumber}}'>{{content}}</a>
</script>
</div>
I've got an angular app I'm working on where I'm trying to auto fill a pop up modal based on a user's selection.
I thought I could use my model service to keep track of what the user selected and 'wire' the controller for the <select> list and it's edit button to the model but that doesn't seem to work.
Adding to the complexity I'm using angular-route and my <select> list is buried in a view. I was trying to keep my pop up modals in a separate controller outside the view because they've got their own templates and I had problems when I nested them into the view...
I've seen a few examples of wiring up angular apps and thought I understood them but I can't figure out what I'm doing wrong.
EDIT (thanks Pankaj Parkar for pointed out my mistakes in the plunker):
I have a plunker here:
https://plnkr.co/edit/6f9FZmV8Ul6LZDm9rcg9?p=preview
Below is the snipped in a single HTML page with CDN links :).
Am I just completely misunderstanding how angularjs is suppose to work?
<html ng-app="myApp">
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div ng-view></div>
<script id="editables.html" type="text/ng-template">
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple ng-model="model.selected">
<option ng-repeat="n in editables">{{n}}</option>
<select>
</div>
<a href="#editModal" class = "btn btn-info" data-toggle="modal" ng-click="edit()" >Edit</a>
</form>
</div>
</div><!--end container div-->
</script>
<div ng-controller="modalsController">
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="name" ng-model="formModel.name"></input>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-3 control-label">Description</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="desc" ng-model="formModel.desc"></input>
</div>
</div>
<div class="modal-footer">
<pre> {{ formModel | json }}<br><br>Working: {{ workingMap }}</pre>
Cancel
Continue
</div>
</form>
</div>
</div>
</div><!-- end modal -->
</div>
</body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src = "js/script.js"></script> -->
<script>
var app = angular.module('myApp', ['ngRoute']);
var modelService = function ($log){
var moduleHello = function(myMessage){
console.log("Module hellow from myService " + myMessage);
}
var moduleNames = {
"First" : {desc: "First's Description"},
"Second" : {desc: "Second's Description"},
"Third" : {desc: "Third's Description"}
};
var moduleWorkingName = {};
return {
hello: moduleHello,
editables: moduleNames,
workingName: moduleWorkingName
}
}//end modelService
app.factory("modelService", ["$log", modelService]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editables', {
controller: "editablesController",
templateUrl: "editables.html"
}).
otherwise({
redirectTo: "/editables"
});
}]);
app.controller('editablesController', ['$scope', '$log','modelService', function($scope,$log, $modelService) {
$scope.model = {};
//console.log( JSON.stringify( $modelService.editables ) );
$scope.editables = [];
for ( name in $modelService.editables){
$scope.editables.push( name );
}
$scope.edit = function(){
if ( typeof $modelService.editables [$scope.model.selected] != 'undefined'){
$modelService.workingName = $modelService.editables [$scope.model.selected];
console.log ("Setting my working name to " + JSON.stringify( $modelService.workingName ) );
}else{
console.log ("Nothing Selected");
}
}
}]);
app.controller('modalsController', ['$scope','modelService', function($scope,$modelService) {
$scope.formModel = {};
$scope.formModel.name = "Hard coding works of course";
$scope.formModel.desc = $modelService.workingName.desc; //But I can't seem to get this to update. I thought pointing it at an object in the Model would be enough.
console.log("Firing up modalsController");
}]);
</script>
</html>
I spent the last two days mulling over this in my head and I think I figured it out. For starters, here's the (working) plunker:
https://plnkr.co/edit/Kt3rebPtvGTt0WMXkQW4?p=preview
Now, the explanation. I was trying to keep a separate 'formModel' object that kept track of the controller's state. But that's both silly and pointless.
Instead what you're supposed to do is:
a. Create an object in your service to hold all your data (I just called this 'model')
b. For each controller that needs to share data create a variable on the $scope of the controller and point it to your 'model' variable from your service.
c. after that use the variables from your model in your html.
So in both my controllers you'll find this line:
$scope.model = $modelService.model;
and in my HTML you'll find stuff like this:
<input type="text" class="form-control" id="name" ng-model="model.workingName.name"></input>
notice how I'm using "model.workingName.name"? This references $scope.model.workingName.name, which thanks to the line $scope.model = $modelService.model from my JavaScript now points directly to my model.
And that is how you "wire up" Angular.
By the way, experienced Angular folks have probably noticed that this part:
$scope.editables = [];
for ( name in $modelService.model.names){
$scope.editables.push( name );
}
probably belongs in a directive instead of a controller because I'm editing the DOM.
Stuff like that's what makes it so hard to learn AngularJS. There's so many concepts to get the hang of.
Good morning everybody,
I am new in Onsen UI, using Angular JS v1.6.1 and Onsen UI v2.
I can’t figure out why my data binding does not work. CSS and JS files seem to load OK but when I open the html file :
1 - button does not show the notification when I click it
2 - The text “Default” does not appear and {{myName}} shows instead
3- Filling the input fill does not update {{myName}}
I have followed the Onsen UI guide (https://onsen.io/v2/docs/guide/angular1/)… I do not understand what could be the problem. I would be very grateful if some of you guys could help me on this topic.
Have a good day !
Cedric
<!doctype html>
<html lang=“en” ng-app=“my-app”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” href=“onsenui/css/onsenui.css”/>
<link rel=“stylesheet” href=“onsenui/css/onsen-css-components.css”/>
<script src=“js/angular.min.js”></script>
<script src=“onsenui/js/onsenui.js”></script>
<script src=“onsenui/js/angular-onsenui.js”></script>
<script>
var module = angular.module('my-app', ['onsen']);
module.controller('AppController', function() {
ons.notification.alert('Welcome !');
$scope.myName = "Default";
$scope.clickHandler = function(event) { ons.notification.alert('Hello ' + $scope.myName);}
});
</script>
</head>
<body ng-controller=“AppController”>
{{myName}}
<br> <br>
<ons-input ng-bind=“myName” placeholder=“Your Name” float></ons-input>
<br> <br>
<ons-button ng-click=“clickHandler”>Say Hello</ons-button>
</body>
</html>
Replace all “ with either " or '.
Inject $scope into your controller:
module.controller('AppController', function($scope) { ...
Change:
ng-click="clickHandler"
To:
ng-click="clickHandler()"
Demo: http://plnkr.co/edit/HomH2oTmESLrs7zSrKei?p=preview
Thanks again for your help. Regarding the text data binding with the input, I nearly managed to fix it as well:
<script>
var app = angular.module('myApp', ['onsen']);
app.controller('todoCtrl', function($scope) {
ons.notification.alert('welcome!');
$scope.name = 'Default';
$scope.clickHandler = function(event) {
ons.notification.alert('Hello ' + $scope.name);
}
});
</script>
</head>
<body>
<ons-span ng-bind='name'></ons-span>
<br>
<ons-input ng-model='name' placeholder='Your Name' float></ons-input>
<br>
<ons-button ng-click='clickHandler()'>Say Hello</ons-button>
</body>
</html>
Each time I click on the "Say Hello" button, data binding updates itself :
However it does not updates automatically without clicking the button.
I observed that if I replace "ons-input" by "input", the data binding updates automatically but I loose the Onsen style of the input... I would like to keep all my html elements as ons- if possible.
Thank you very much !
I have a bit of a complicated MVC project that we are adding some Angular capability to. I am very new to Angular and have watch three Angular courses on Pluralsight now. They have been very helpful but I am missing some piece of understanding.
I understand that I need to have just one ng-app (unless I want to bootstrap and I don't think I want to). So this app has defined my config and a custom directive. The custom directive is working nicely but when I click on a link in that directive it does not go anywhere....well perhaps it does but not where I am expecting. Fiddler shows nothing unusual like 404 or 500 errors.
(function ()
{
"use-strict";
angular.module("appMainNav", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider.when("/MySearch", {
controller: "routingController"
});
$routeProvider.otherwise({ redirectTo: "/" });
})
})();
My routingController:
(function () {
"use strict";
angular.module("appMainNav")
.controller("routingController", routingController);
function routingController($http) {
var vm = this;
alert("Routed");
}
})();
My HTML link as rendered:
Search
I don't get a page not found...the url just appends the #/MySearch. No console errors etc.
I was expecting to get a javascript alert...?
TIA
Edit
Should have added sooner. Here is markup:
_Layout page:
<body>
<div ng-app="appMainNav" ng-controller="routingController" class="container">
#RenderBody()
</div>
</body>
RenderBody is Index.cshtml:
<div class="row">
<div>
Header Stuff
</div>
</div>
<div class="row">
<div class="col-md-2">
<dashboard-main-nav></dashboard-main-nav>
</div>
<div class="col-md-3">
<div></div>
</div>
<div class="col-md-8">
<div></div>
</div>
</div>
<div class="row">
<div>
Footer Stuff
</div>
</div>
The custom directive angular code was left out of the snips above however that is where the link is generated.
You need to assign an event handler to a click event on the anchor tag:
Search
where foo is a function defined on the controller's scope:
function routingController($http, $scope) {
var vm = this;
$scope.foo = function(){
alert("I am so tired");
}
alert("Routed");
}
Try that and it should work.
I have a REST Service written in Java which returns an array of data in JSON like this:
[{"key":"London","value":"51.30"}]
Now I'm trying code an AngularJS REST clients using the AJS documentation. So far I've been able to invoke the REST service (I can see from the server logs) yet nothing is printed in the HTML page.
Here is my code:
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
<script language="javascript">
angular.module('myApp',['ngResource']);
function Ctrl($scope,$resource) {
var Geonames = $resource(
'http://localhost:8080/rest-application/rest/json', {
}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
}
);
$scope.objs = Geonames.query();
};
Ctrl.$inject = ['$scope','$resource'];
</script>
</head>
<body >
<div ng-app="myApp">
<div ng-controller="Ctrl">
{{objs.key}} - {{objs.value}}
</div>
</div>
</body>
</html>
I have tried this example with several small variants taken from tutorials yet it is still not working. Any help ?
Thanks!
What you get back from query() is an array so you should loop over it with ng-repeat
<div ng-app="myApp">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="obj in objs">{{obj.key}} - {{obj.value}}</li>
</ul>
</div>
</div>
First of all, let's organize your code a bit:
var app = angular.module('myApp',['ngResource']);
// Controllers get their dependencies injected, as long as you don't minify your code and lose variable names.
app.controller('Ctrl', function($scope, $resource) {
$scope.objs = []; // We initialize the variable for the view not to break.
// For the query example, you don't need to define the method explicitly, it is already defined for you.
var Geonames = $resource('http://localhost:8080/rest-application/rest/json');
// Resource methods use promises, read more about them here: http://docs.angularjs.org/api/ng/service/$q
Geonames.query({}, function(arrayResult) {
$scope.objs = arrayResult;
});
});
You have to adjust your html code with an ng-repeat directive to handle each item of your array:
<body>
<div ng-app="myApp">
<div ng-controller="Ctrl">
<!-- object is a reference for each item in the $scope.objs array-->
<span ng-repeat="object in objs">
{{object.key}} - {{object.value}}
</span>
</div>
</div>
</body>