Angular not compiling correcty - javascript

I'm trying to get my head around learning $compile but just looking for a couple of pointers as to where I'm going wrong...
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
$(document).on("click", "#button", function ($compile) {
var newDirective = angular.element('<li>{{app data}}</li>');
$(".grid ul").append(newDirective);
$compile(newDirective)($scope);
});
});
I suppose firstly, nothing seems to work when I put it into my directory but it does when I put it in the controller. And secondly it doesn't seem to compile as the Angular tags/elements don't render correctly. I just can't figure out where I'm going wrong...

As per the Docs $compille
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
You are on the right track to use it , just need some modification in your directive code like this.
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
return{
restrict: 'A',
scope: {
data:"=appdata"
},
link: function(scope,element){
var newDirective = angular.element('<li>'+ scope.data +'</li>');
var content = $compile(newDirective)(scope);
element.append(content);
}
}
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Ctrl">
<div class="grid" >
Hello
<ul my-dir appdata="'whatever'">
</ul>
</div>
</body>
</html>
Plunker : https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview

Your directive is not formatted (created) correct. No need to use JQUERY... you are compiling the html and the data ($scope) but you are not applying the compiled template to your html.
Check this plunkr: https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview
angular.module('plunker', [])
.directive('compileDir', ['$rootScope', '$compile', compileDir])
.controller('HomeController', [HomeController]);
function compileDir($rootScope, $compile) {
var self = {};
self.restrict = 'A';
self.scope = {
compileDirOptions: '='
};
self.link = linkFn;
return self;
function linkFn($scope, $element, $attributes) {
// I am making a new scope because I do not want to mess the directive's one, you do not have to
var newScope = angular.merge($rootScope.$new(), $scope.compileDirOptions.data);
var el = $compile($scope.compileDirOptions.html)(newScope);
$element.append(el);
}
}
function HomeController() {
var self = this;
self.message = "Hello World!";
self.data = {
html: '<li>{{name}}</li><li>{{color}}</li>',
data: {
name: 'app data',
color: 'red'
}
}
}
Your html is like this:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="HomeController as home">
<ul compile-dir compile-dir-options="home.data"></ul>
</body>
</html>

Related

How to create factory in AngularJS?

I had created a factory in angular but i am getting the following error
Unknown provider:
Here is the factory:
app.factory("getFoo", function($scope){
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
The controller is:
app.controller('myCtrl', ['$scope','getFoo',function($scope,getFoo){
$scope.myArr = getFoo.getCommi(4,1);
}])
What can I have to do for fix this? I just don't see any problem.
no need of scope and your factory injection should be like below
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, getFoo) {
$scope.myArr = getFoo.getCommi(4,1);
});
app.factory('getFoo', function () {
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{myArr}}!</p>
</body>
</html>
you just need to remove $scope from factory.
working fiddle link
Please remove $scope from the factory.
var app = angular.module('myApp',[]);
app.factory("getFoo", function(){
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
app.controller('myCtrl', ['$scope','getFoo',function($scope,getFoo){
$scope.myArr = getFoo.getCommi(4,1);
}])
Remove $scope from your factory and add factory "getFoo" as a dependency in your app's run module like this:
app.run(['$rootScope', '$location', 'getFoo', function($rootScope, $location, getFoo) {
}]);

Angular js binding expression does not show value

The index.html page looks like this.
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="/js/script.js"/>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
The script.js file looks like this:
var MainController = function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
But when I boot up the application my page shows :
{{message}}
{{person.firstName}}
and not the values that it should. Am I missing something here? I am using spring boot.
I have debugged the chrome and have seen the js file loading properly, it even hits the debugger point in the js file,hence the file loading is not the problem i suppose.
UPDATE- THIS WORKED
var MainController = function($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
angular.module('mainApp', [])
.controller('MainController', MainController);
index.html
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.14" src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<meta charset="UTF-8">
<title>Test Page</title>
</head>
<body ng-controller="MainController">
<div>
<h1>{{message}}</h1>
<div>
{{person.firstName}}
</div>
</div>
</body>
</html>
Since angular 1.3+ global function declaration of controller haven't been supported. So you have first create an angular module and then bind all of its angular component to it.
Also move /js/script.js right after angular.js reference with closing </script> tag.
Code
angular.module('mainApp', [])
.controller('MainController', MainController)
function MainController($scope) {
var person = {
firstName: "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
};
Then do add mainApp module inside ng-app directive like ng-app="mainApp" on html tag.
Demo Here
You need to define the module and the controller,
HTML:
<body ng-app="DemoApp" ng-controller="DemoController">
{{message}} {{person.firstName}}
</body>
Controller:
var app = angular.module('DemoApp', ['angular.filter'])
app.controller('DemoController', function($scope) {
var person = {
firstName : "Nagendra"
};
$scope.person = person;
$scope.message = "Hello Angular!";
});
DEMO

AngularJs directives call link function on click

I am wondering how to specify when the link function for a directive should be called.
Currently I have the following code:
<my-directive username="abc"></my-directive>
module.directive("myDirective", [{
restrict: "A",
link($scope, element, others) {
//if element.clicked() {
// console.log("you clicked me");
//}
}
}]);
As you can see I have commented out pseudo-ish code of what I would like to do and I have seen that it's possible to do something like element.onClick = function() {}. But this still doesn't seem to be called when the element is clicked.
Thanks
Try this:
element.on('click', function() {});
Angular uses build in jQuery Lite, so you can use this.
Try this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.abc = 'abc';
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
username: '='
},
link:link,
template: '<div>Click Here</div>'
};
function link(scope,elem,others){
elem.bind('click', function() {
console.log('on click');
});
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<my-directive username="abc"></my-directive>
</body>
you can also try like this!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.abc = 'abc';
});
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
username: '='
},
link:link,
template: '<div ng-click="click()">Click Here</div>'
};
function link(scope,elem,others){
scope.click = function() {
console.log('on click', scope.username);
}
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<my-directive username="abc"></my-directive>
</body>

How do I load an html file into ngQuill (Quill Editor)?

I'm using ngQuill, a version of Quill for AngularJS, and I need to know if there is a way to put/load an HTML already created into the editor.
I can't find anything about it in the documentation.
Like always, sorry for my poor english :c
$scope.message = 'Welcome to the Editor!';
$scope.showToolbar = true;
$scope.translations = angular.extend({}, ngQuillConfig.translations, {
10: 'smallest'
});
$scope.toggle = function() {
$scope.showToolbar = !$scope.showToolbar;
};
// Own callback after Editor-Creation
$scope.editorCallback = function (editor, name) {
console.log('createCallback', editor, name);
};
$scope.readOnly = false;
$scope.isReadonly = function () {
return $scope.readOnly;
};
$scope.clear = function () {
return $scope.message = '';
};
// Event after an editor is created --> gets the editor instance on optional the editor name if set
$scope.$on('editorCreated', function (event, editor, name) {
console.log('createEvent', editor, name);
});
$timeout(function () {
$scope.message = 'Async Test Content';
console.log($scope.message);
}, 3000);
<ng-quill-editor
id="editor1"
name="editor1"
callback="editorCallback(editor, name)"
ng-model="message"
translations="translations"
toolbar="true"
show-toolbar="showToolbar"
link-tooltip="true"
image-tooltip="true"
toolbar-entries="font size bold list bullet italic underline strike align color background link image"
editor-required="true"
required=""
read-only="isReadonly()"
error-class="input-error"
fontsize-options="fontsizeOptions"
fontfamily-options="fontfamilyOptions">
</ng-quill-editor>
may be this plnkr could help:
i only included ngSanitize in my main module and it seems to work...
var myAppModule = angular.module('plunker', ['ngQuill','ngSanitize']);
myAppModule.config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
ngQuillConfigProvider.set();
}]);
myAppModule.controller('AppCtrl', [
'$scope',
'$timeout',
function($scope, $timeout) {
$scope.name='moshe'
$scope.title = '<h1>Quill works</h1>';
$scope.readOnly = false;
$timeout(function () {
$scope.title += ' awsome!!!'
}, 2000);
$scope.editorCreated = function (editor) {
console.log(editor);
};
$scope.contentChanged = function (editor, html, text) {
console.log('editor: ', editor, 'html: ', html, 'text:', text);
};
}
]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.snow.css">
<link rel="stylesheet" href="//cdn.quilljs.com/1.1.5/quill.bubble.css">
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script data-require="angular-sanitize.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular-sanitize.js" data-semver="1.5.8"></script>
<script type="text/javascript" src="//cdn.quilljs.com/1.1.5/quill.js"></script>
<script type="text/javascript" src="http://killercodemonkey.github.io/ng-quill/src/ng-quill.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<p>generated: <i ng-bind-html="title"></i>!</p>
<ng-quill-editor ng-model="title" read-only="readOnly" required="true" modules="{toolbar: true}"></ng-quill-editor>
</body>
</html>
I can't help with Angular, but this was my jQuery solution (for a readOnly page)
Create the editor
Locate your target (where you want the text to be displayed)
Parse your string content
setContents of your editor
var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
console.log(quill);
console.log(quill.innerText);
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);

ReferenceError: module is not defined in Jasmine Angular js

I am begining with Angular and with unit testing, this is my first code, and it isn't working. I searched for a solution but I dont know what I am doing wrong. If anyone can explain to me what is the mistake, I would thank you.
This is all my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-mocks.js"></script>
<script src="jasmine.js"></script>
<script src="jasmine-html.js"></script>
<script src="boot.js"></script>
<link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">
<link rel="stylesheet" href="jasmine.css">
</head>
<body ng-app = "myApp">
<div ng-controller = "MyCtrl">
{{greeting}}
</div>
<br><br><br>
<script>
<!-- CODE -->
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';
}]);
<!-- JASMINE -->
describe('myApp', function () {
var scope,
controller;
beforeEach(function () {
module('myApp');
});
describe('MyCtrl', function () {
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MyCtrl', {
'$scope': scope
});
}));
it('sets the greeting', function () {
expect(scope.greeting).toBe('Hello World!');
});
});
});
describe('JavaScript addition operator', function () {
it('adds two numbers together', function () {
expect(1 + 2).toEqual(3);
});
});
</script>
</body>
</html>
Thanks in advance
The sequence of your scripts is wrong. You should first include the scripts related to Jasmine, and then the scripts for angular and angular-mocks.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Scripts for Jasmine-->
<script src="jasmine.js"></script>
<script src="jasmine-html.js"></script>
<script src="boot.js"></script>
<!--Script for Angular-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!--Scripts for Angular-Mocks-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-mocks.js"></script>
<link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">
<link rel="stylesheet" href="jasmine.css">
</head>
<body ng-app = "myApp">
<div ng-controller = "MyCtrl">
{{greeting}}
</div>
<br><br><br>
<script>
<!-- CODE -->
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';
}]);
<!-- JASMINE -->
describe('myApp', function () {
var scope,
controller;
beforeEach(function () {
module('myApp');
});
describe('MyCtrl', function () {
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MyCtrl', {
'$scope': scope
});
}));
it('sets the greeting', function () {
expect(scope.greeting).toBe('Hello World!');
});
});
});
describe('JavaScript addition operator', function () {
it('adds two numbers together', function () {
expect(1 + 2).toEqual(3);
});
});

Categories