I am making an app using angular and firebase. I want to implement angular-trix editor so that users can post their own articles. But I don't know how to integrate angular-trix. I have included the js files and in app.js I have injected the 'angularTrix'.
var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngAnimate', 'firebase', 'ngSanitize','angularTrix']);
This is my html page.
<div>
<trix-editor ng-model="trix" angular-trix></trix-editor>
<button ng-click="save()">Save!</button></div>
and this is controller
app.controller('profileCtrl', ['$scope', "$routeParams", "$firebaseObject", "$sce", "Auth", function($scope, $firebaseObject, $routeParams, $rootScope, Auth, $sce) {
// Demo controller
console.log('In ctrl');
$scope.trix = '<p>Hello</p>';
$scope.save = function() {
alert($scope.trix);
};}]);
I don't know what I have to include in a controller. I want that when a user will press submit button, it should extract the HTML and save it to the firebase.
I know how to save data in firebase but not how to extract the HTML from AngularTrix.
A snippet of code of controller would be of much help.
The inner html is stored in the model which you pass to the editor through ng-model attribute like this:
<trix-editor angular-trix ng-model="foo"></trix-editor>
Here, foo would have your markup:
angular.module('trixDemo', ['angularTrix']).controller('trixDemoCtrl', function($scope) {
$scope.foo = '<div>Hello world!</div>';
});
Small Demo
Related
I am very new to Angularjs. I have a single page application where index.html is the root page.it contains below content
index.html
//links to other pages
//ng-view
I have an app.js file linked to index.html which loads the respective pages when user clicks on links in index.html using ngRoute.
my app.js page looks something like this
app.js
'use strict';
angular.module('myApp', [ 'ngRoute', 'ngAnimate', 'ngSanitize',
'ui.bootstrap', 'checklist-model', 'blockUI','isteven-multi-select' ]);
var App = angular.module('myApp');
//ngroute code
Now a page search_name.html and search_name_controller.js loaded when user clicks on one of the links in index.html
search_name_controller looks something like this.
search_name_controller.js
'use strict';
App.controller('SearchCifCtrl', [ '$scope', '$location', '$uibModal',
'WorkflowService', 'ConstantService', function($scope, $location, $uibModal,
WorkflowService, ConstantService) {
//some code
} ]);
Snce it is a single page application angular.module statement is written only in app.js file. It is not written in any other js file. Now i want to test search_name_controller.js using KARMA.I have written test code like below
search_name_controller.test.js
describe('search_name_controller', function () {
beforeEach(function() {
module('myApp');
});
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
//code to test method
});
While i try to run this test, I am getting error as "$controller is not a function". i feel the error is because the angular.module part is not defined in search_name_controller.js file. When i try to add it ,i am able to run the test.But i am not allowed to make any changes to existing code. Is there any way where my test file can read angular.module part of app.js file even if i write test scenario for search_name_controller.js.
Kindly help
beforeEach(inject(function($controller){
controller = $controller('SearchCifCtrl', {
$scope: scope
});
}));
//try this to inject your controller
I am trying to create an Angular controller that has ngSanitize like in the example here https://docs.angularjs.org/api/ngSanitize/service/$sanitize
But I am not sure how to do this in CoffeeScript.
In the example in the docs, here's how a controller is being created with ngSanitize.
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce)
Here is my current controller written in CoffeeScript:
app = angular.module 'example'
app.controller 'exampleController', ($scope, widgetSrv)
How would I add ngSanitize to this?
Change the second line of your controller to:
app = angular.module 'example', ['ngSanitize']
I have a text field:
<input type="text" ng-model="user">
and I have a button that will redirect to another page. On that page, I want to print the username typed in by the user. How can I do that?
My preference is ionic.
ionic works on top of angular. There are various ways by which you can achieve this functionality:
1) Use constants file to keep your value
Create a file called constants.js, include it in your index.html as:
<script src="Constants/Constants.js"></script>
declare key value pair combinations in it as:
var url_config = {
"USER_NAME" : "LOGIN_USER",
};
in your controller file, set the USER_NAME value as:
url_config.USER_NAME = $scope.user; //the model variable name that you had used
Use this value, where you want to access as:
$scope.loggedInUser = url_config.USER_NAME; // you will get the value here
The disadvantage here is that the value will get lost if you reload the screen. This can be ignored in android or ios app that you create using phonegap, the screens can't be refreshed, but if you are using web app this won't be a recommendable method.
2) Use a service to pass the constants
Create a utility service to keep the variable
angular.module('myApp').service('UtilityService', function () {
this.USER_NAME = '';
});
You can set this in your controller as:
angular.module('myApp')
.controller('LoginController', function ($scope, UtilityService) {
UtilityService.USER_NAME = $scope.user;
});
Access it in your other controller as:
angular.module('myApp')
.controller('UserController', function ($scope, UtilityService) {
$scope.loggedInUser = UtilityService.user;
});
This is a reliable way and a recommended method too.
3) Use local Storage
Here you can use the HTML5 feature of local storage to access the value from the browser's local storage.
Set the value in the login controller as:
angular.module('myApp')
.controller('LoginController', function ($scope, $localStorage) {
$localStorage.USER_NAME = $scope.loggedInUser;
});
In the receiving controller use it as:
angular.module('myApp')
.controller('UserController', function ($scope, $localStorage) {
$scope.loggedInUser = $localStorage.USER_NAME;
});
This will pertain the value even if the app goes to background or quits. Unless you clear the app cache or app data manually, the value will be saved.
For accessing $localStorage, you will require to use the ngStorage plugin that you can access from github and follow the instructions for instalation, then inject ngStorage as:
var myApp = angular.module('app', ['ngStorage']);
Now you are ready to use the $localStorage, provided you have included it in the controller where you are willing to access it.
4) Use session storage
Using the same ngStorage plugin you can use the session storage via $sessionStorage.
Set the value in the login controller as:
angular.module('myApp')
.controller('LoginController', function ($scope, $sessionStorage) {
$sessionStorage.USER_NAME = $scope.loggedInUser;
});
In the receiving controller use it as:
angular.module('myApp')
.controller('UserController', function ($scope, $sessionStorage) {
$scope.loggedInUser = $sessionStorage.USER_NAME;
});
Session storage keeps the data in session which gets expired after a limited time. This usage would be recommended for features like access tokens etc. For this scenario of username this won't be a recommended method
There are mainly two ways to achieve this:
1.By using Constants
app.js
angular.module('ionicApp', ['ionic'])
.constant('appConstant', {
user: ''
})
Controller
angular.module('ionicApp.home', ['ionic'])
.controller('homeCtrl', ['$state', 'appConstant', function($state, appConstant) {
'use strict';
$scope.user = '';
$scope.onClick = function() {
appConstant.user = $scope.user;
};
}]);
html
<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>
Now you will get user name from any controllers by using appConstant.user
2.By using localstorage
Controller
angular.module('ionicApp.home', ['ionic'])
.controller('homeCtrl', ['$state', '$localStorage', function($state, $localStorage) {
'use strict';
$scope.user='';
$scope.onClick = function() {
$localStorage.set('user', user);
};
}]);
html
<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>
Now you will get user name from any controllers by using $localStorage.get('user')
Ref: https://github.com/jvandemo/angular-growl-notifications
What will be the app.js file for Growl notifications ? I just need a simple notification as shown in the " Basic Example in the link below.
http://jvandemo.github.io/angular-growl-notifications/examples/index
Yes, we need one. Here is the Plunker.
http://plnkr.co/edit/ZZHW0JKumXfdFgjTjVJz?p=preview
var app = angular.module('plunker', ['growlNotifications']);
app.controller('MainCtrl', function($scope, $timeout) {
});
I have a Controller which has something like this...
angular.module('kZoneApp').controller('DemandController', ['$http', '$scope', '$rootScope', 'dataFactory', '$window', '$routeParams','$sce', function ($http, $scope,$rootScope, dataFactory, $window, $routeParams,$sce) {
$scope.channel = $routeParams.channel;
now within my page.html, I want to do the following....
<script>
YoutubeVideoPlayer.openVideo('{{channel}}');
</script>
please note, I am using Routes, and page.html is loaded into my ng-view Via a Route.
<div id="myView" class="reveal-animation" ng-view></div>
I tried below code, but it returns undefined....
$().ready(function () {
var channel = angular.element("#myView").scope().channel
YoutubeVideoPlayer.openVideo(channel);
})
How can I get the value of Channel within my Template View?
Update
below works...but I am sure there has to be a cleaner solution
setTimeout(function () {
alert(angular.element("#myView").scope().channel)
}, 500);
A workaround solution should be creating a variable before your Angular.module definition.
var scopeInAngular = null;
and inside controller assign controller to your variable.
scopeInAngular = $scope;
then if you manipulate anything inside angular view use
scopeInAngular.$apply();