I am using ng-click to call a function with arguments I get from the $scope. Unfortunately either are the arguments not processed from angular or I get this error:
Error: [$parse:syntax] Syntax Error: Token ':' not a primary expression at column 1 of the expression [:notification] starting at [:notification].
HTML snippet that results in error:
<div ng-click="goToNotif({{notification.id}})"></div>
HTML snippet not being processed from angular:
<div ng-click="goToNotif(notification.id)"></div>
IMPORTANT: notification is parsed from a repeat
<div(ng-repeat="notification in notifications")></div>
Here is the code for index.html, define "notifications" seperately -
<div ng-app="MyApp">
<div ng-controller="MainCtrl">
<div(ng-repeat="notification in notifications")>
<div ng-click="go(notification.id)"></div>
</div>
</div>
</div>
In main.js -
var app = angular.module('MyApp', []);
app.controller('MainCtrl', function($scope) {
$scope.go = function() {
//write code here.
}
});
Related
I am trying to run an angularJS example in jsfiddle (ofcourse learning purpose) getting below errors in console.
When I add this cdn for angular compatibility:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js
I seen below error.
VM141 angular.min.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=myApp&p1=Error%3A%2…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.6%2Fangular.min.js%3A21%3A19)
When I remove the external source, seen below error:
VM93:45 Uncaught ReferenceError: angular is not defined
Concern:
Do I need to add external source for angular example? If yes then what will be the correct way to add external resource. (like, search a cdn for that api and add).
Here's the code snippet:
html:
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{$scope.name}}
</div>
js:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});
Here's the fiddle: https://jsfiddle.net/supdas87/my1juu4e/2/
I've added angular-1.0.1.js file to external resources (you just have to copy and paste the URL), and changed {{$scope.name}} by {{name}} on your HTML file. You do not have to write $scope when you use {{ }}, it is implicit.
Here is a working Fiddle based on the code you provided.
PS: I've added Angular 1.0.1, but of course you can use the version of Angular you want. You can see allreleases here.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
Your name: <input type="text" ng-model="name" ng-click="displayName();">
Hello {{name}}
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.displayName = function(){
alert("In right place");
$scope.name = "Name";
}
});
I need to show link in page having attribute value mailto.
normal href attribute value working fine but if value is email than it removed
Code:
myCtrl.link = '<code>Email</code>';
<code><span ng-bind-html="myCtrl.link"></span></code>
rendered output:
<code><a target="_blank">Email</a></code>
Please suggest how to handle anchor having href value like mailto:sulok#atlogys.com
You are running into a "security" issue,
please have a look at this doc-page...
Just say "this is safe" to angular:
function TestCtrl(vm, $sce) {
'use strict';
var htmlString = '<code>Email</code>';
vm.link = $sce.trustAsHtml(htmlString);
}
angular
.module('test', [])
.controller('TestCtrl', ['$scope', '$sce', TestCtrl])
;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<article ng-app="test">
<div ng-controller="TestCtrl">
<code><span ng-bind="link"></span></code>
</div>
</article>
I'm writing a Firefox addon. I have a very simple code:
var ANG_APP = angular.module('zooniversexpert', [])
.config(['$compileProvider', function( $compileProvider ) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|http?):/);
}
])
.controller('BodyController', ['$scope', function($scope) {
this.gallery = [{url:'http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006076.JPG'}];
}]);
That gallery array holds a single element with key url of http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006076.JPG.
My HTML is here:
<body ng-controller="BodyController as BC">
<img ng-src="aEntry.url" ng-repeat="aEntry in BC.gallery"/>
</body>
However the image fails to load, it keeps giving this error:
And inspection on the document shows this is what Angular tried to load:
<img xmlns="http://www.w3.org/1999/xhtml" ng-src="aEntry.url" ng-repeat="aEntry in BC.gallery" class="ng-scope" src="unsafe:aEntry.url" />
Please notice the unsafe:aEntry.url.
I am doing a simple example but for some reason I am unable to print the value in message variable that I pass through $scope in my controller.
please find my code as give in this fiddle: http://jsfiddle.net/yy3vuzfk/1/
html page code:
<div ng-app>
<div>Hello AJS</div>
<div> Sum of 2 and 3 is: {{ 2 + 3}}
<div ng-controller="myController">
Message: {{ message }}
</div>
</div>
script.js code
var myController = function($scope){
$scope.message = "My Message";
};
My output html
Hello AJS
Sum of 2 and 3 is: 5
Message: {{ message }}
any help is appreciated
You first need to initalize angular by creating a module and then creating a controller in that module.
You can see this updated fiddle.
angular.module('myApp', [])
.controller("MyController", function($scope) {
$scope.message = "My Message Is Super Awesome";
});
You can find basic examples # Angularjs.org home page. Look at the "Add Some Control" section on that page.
I have a page with a pop-up I use on several pages and I load it using ng-include. In this pop-up there is three tabs also dynamically loaded using ng-include.
So my code looks like this:
<div ng-include="'/pages/ng-templates/Cockpit.html'"></div>
in Cockpit.html I have the following code:
<div id="dlgCockpit" class="Cockpit jquerydialog">
<div id="tabs">
<ul>
<li>tabA</li>
<li>tabB</li>
<li>tabC</li>
</ul>
<div id="tabA">
<div ng-include="'/pages/ng-templates/Cockpit-A.html'"></div>
</div>
<div id="tabB">
<div ng-include="'/pages/ng-templates/Cockpit-B.html'"></div>
</div>
<div id="tabC">
<div ng-include="'/pages/ng-templates/Cockpit-C.html'"></div>
</div>
</div>
</div>
<script src="/pages/ng-templates/scripts/Cockpit.js"></script>
In Cockpit-A.html I have the following Code:
<div id="dlgCockpitA">
<form name="frmA" class="cntrCockpitA form" ng-controller="AController">
<!-- some inputs using ng-model -->
</form>
</div>
<script src="/pages/ng-templates/scripts/Cockpit-A.js"></script>
Cockpit.js:
function showCockpit(vsTnID, vsBenutzer) {
$('#dlgCockpit').data('tnid', vsTnID);
var $dialog = $("#dlgCockpit")
.dialog({
autoOpen: false,
title: locBenutzer + ': ' + vsBenutzer + ' (ID: ' + vsTnID + ')',
width: 1000,
show: 'fade',
resizable: false,
open: function (event, ui) {
$("#tabs").tabs({ active: 0 });
angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');
},
close: function (event, ui) {
}
});
$dialog.dialog('open');
return false;
}
Cockpit-A.js:
app.controller('AController', ['$scope', '$http', function ($scope, $http) {
//some function definitions on $scope
}]);
When I load the page I get the following in the javascript console:
Error: [ng:areq] Argument 'AController' is not a function, got undefined
http://errors.angularjs.org/1.2.26/ng/areq?p0=StammdatenController&p1=not%20aNaNunction%2C%20got%20undefined
at http://localhost:63323/scripts/angular/angular-1.2.26.js:78:12
at assertArg (http://localhost:63323/scripts/angular/angular-1.2.26.js:1509:11)
at assertArgFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:1519:3)
at http://localhost:63323/scripts/angular/angular-1.2.26.js:7278:9
at http://localhost:63323/scripts/angular/angular-1.2.26.js:6670:34
at forEach (http://localhost:63323/scripts/angular/angular-1.2.26.js:332:20)
at nodeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6657:11)
at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6105:13)
at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6108:13)
at publicLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6001:30)
When calling showCockpit I get the following error in the line angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');:
Uncaught TypeError: undefined is not a function
Actually everything works if I put the script tag for Cockpit-A.js in the "base page" which is including Cockpit.html or if I create the Controller just by calling function AController($scope, $http) { ... }, but both of those are not an option.
I had the exact same problem. Found a solution thanks to: http://ify.io/lazy-loading-in-angularjs/
Basically, it is not possible to use app.controller(...) after bootstrapping the app. I suggest reading the link for more information. The solution is to save the controllerProvider ahead and use it to register the module.
var app = angular.module('myModule', []);
app.config(function($controllerProvider) {
app.controllerProvider = $controllerProvider;
});
// Later on... after bootstrapping...
app.controllerProvider.register('myController', function() {... });