I am getting object not set to instance during page load inside angularJs code
View
#model IAAS_Application.Models.ManageModels
#{
ViewBag.Title = "IAAS";
Layout = null;
}
My Angular Module
var app = angular.module('R1_myApp', []);
app.controller('R1_myCtrl', function ($scope, $http, $window, $compile) {
$scope.initEditModeData=function(){
debugger;
if(1==0){
$scope.PP.Private =(#Model.PP==null)?false:#Model.PP.Private;
$scope.PP.Public = (#Model.PP==null)?false:#Model.PP.Public;
$scope.PP.Cust_Name= (#Model.PP==null)?"":#Model.PP.Cust_Name;
$scope.PP.Cust_Flag=false
}
};
});
I am getting this error
I have put Null condition to make sure it doesn't enter inside. But by default while page load, control enters in and gives error.
What am I missing? can anyone help me?
I tried inititializing the object in c# MVC code and then send it it view. It worked. I am not getting error now.
obj.PP = new PP();
Return view(obj)
Related
I am not able to access a service inside my controller method.
AppController.$inject = ['$scope', 'appService'];
function AppController($scope, appService) {
$scope.name = "World";
$scope.clicked = function() {
//am not able to access appService here
/*
appService.setName("john");
$scope.name = getName();
*/
$scope.name = "button clicked";
}
}
http://plnkr.co/edit/UgHmtCbkxeyluTPJOG4T?p=info
The service is accessible when the controller gets created, but not when clicked() is called in the controller. Please let me know if I am missing something here.
I was trying to create a directive (something like a locale select dropdown). I wanted the directive to have its controller and its own service. My idea is that the controller would handle the languageChange() method when the user changes the dropdown and sets the language in a service, so that I can inject this service in any other part of the application.
That's when I had problems in accessing the service inside my controller method(languageChange())
I think if I get the basic example right, I will be able to proceed with my language change directive.
You forgot add the appService to getName()
Use this:
appService.setName("john");
$scope.name = appService.getName();
Instead of:
appService.setName("john");
$scope.name = getName();
Running example: http://plnkr.co/edit/Hh9g7H9PI9JhNdbAhqdT?p=preview
I'm trying to use winjs with angular and typescript.
The Angular-Winjs wrapper is working good as long I don't have to use some additional JavaScript for the Dom-Elements.
In my case I want to use the split-view item:
The menu gets displayed but the JavaScript-functionallity is not working.
this is my Code:
<win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
<win-split-view id="splitView">
<win-split-view-pane>
SplitView Navigation Pane
<win-split-view-command label="'Home'" icon="'home'" on-invoked="goToHome()"></win-split-view-command>
<win-split-view-command label="'Settings'" icon="'settings'" on-invoked="goToSettings()"></win-split-view-command>
</win-split-view-pane>
<win-split-view-content>SplitView Content Area</win-split-view-content>
</win-split-view>
this is the example Code from the github-project-side.
their example also says that I have to add this to my Controller:
angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
$scope.splitViewElement = document.getElementById("splitView");
});
now my problem is that I'm using typescript and create my Controller with the controllerAs-Syntax. When I add
$scope.splitViewElement = document.getElementById("splitView");
to my controller, the splitView-Element is NULL.
I also tried to use
angular.element("splitView").context
which has an element but it doesn't work, too.
this is my Controller.
constructor($scope, $state, $http, $q) {
super($state, $http, $q, $scope, true);
$scope.splitViewElement = document.getElementById("splitView"); //this is null
$scope.splitViewElement = angular.element("splitView").context; //this is not null
}
Might be late but here is how it works for me. In my controller I'm querying for the element with angular.element
vm.splitViewElement = angular.element("#splitView")[0];
If the element is available it should be the first in the array. Now simply bind the vm.splitViewElement to your view:
<win-split-view-pane-toggle class="win-splitviewpanetoggle" split-view="vm.splitViewElement">
</win-split-view-pane-toggle>
The following code is a function that uses parameters. When I alert the variable, the string appears exactly how it is supposed to.
$scope.createMap = function(size,scale,center,zoom,style){
$scope.myMap = "<img ng-src='https://maps.googleapis.com/maps/api/staticmap?size="+size+"&scale="+scale+"¢er=IL"+center+"&style="+style+"&zoom="+zoom+"'>";
alert($scope.myMap);
return;
}
However, on the HTML page where this is binded to:
<div ng-bind-html="myMap" id="myStaticMap">
MAP GOES HERE
</div>
The area is empty and when I "inspect element" there is <img></img>, so it is registering it is an image, but coming up empty.
Same thing happens here:
$scope.displayPage = function(page){
$scope.siteName = $scope.names[page].PageName;
$scope.logo = "<img ng-src='"+$scope.names[page].logo+"'>";
alert($scope.logo);
$scope.createMap($scope.names[page].Size,$scope.names[page].Scale,$scope.names[page].Center,$scope.names[page].Zoom,$scope.names[page].Style);}
Where the parameter is being used a little bit differently. But again, the alert for $scope.logo is alerting the correct string but there is <img></img> where it is supposed to be binded. $scope.siteName is binded fine, but then, it is not binding any HTML.
I am using the sanitize module:
var app = angular.module('myApp', ["ngSanitize"]);
(the script is placed last in my list of external references)
So I am not sure what is wrong here.
UPDATE: So I did the suggestion in answer below and it is working when I change ng-src to src so that is awesome. However, I am getting the error below in my web console, anyone know why? I get it whether I use ng-src or src:
"Error: html.indexOf is not a function
htmlParser#http://code.angularjs.org/1.0.3/angular-sanitize.js:205:12
$sanitize#http://code.angularjs.org/1.0.3/angular-sanitize.js:119:1
ngBindHtmlWatchAction#http://code.angularjs.org/1.0.3/angular-sanitize.js:420:1
Yd/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:110:371
Yd/this.$gethttps://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:113:360
m#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:72:452
w#https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:77:463
ye/https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js:79:24
var app = angular.module('myApp', ["ngSanitize"]);
app.controller('customersCtrl', function($scope, $http, $sce) {
When you parse html from within your controller, you have to use the $sce dependency from angular, in order to mark the html as "trusted":
angular.module("yourModule").controller("yourController",
["$scope", "$sce", function ($scope, $sce) {
$scope.displayPage = function(page){
$scope.siteName = $scope.names[page].PageName;
$scope.logo = $sce.trustAsHtml("<img ng-src='"+$scope.names[page].logo+"'>");
alert($scope.logo);
$scope.createMap($scope.names[page].Size,$scope.names[page].Scale,$scope.names[page].Center,$scope.names[page].Zoom,$scope.names[page].Style);}
}
]);
I am very much new in AngularJS and due to which I am facing an issue and not able to understand the exact problem. The code which I tried is worked in normal javascript code but now I want to use custom service (factory function). Actually, I have a textarea where user can input their text and then they can do the formating by selecting any of the text. (discovertheweb.in/woweditor - this is existing site which I have created now I want to apply angular in this code). Now, I have created a custom service to check whether the user select any content or not. I have used the below code in my custom services and try to get the selection start, end point so that I can get the selected text from the textarea field. But, the problem is that I am getting 0 value for both selection start and end point. When i used the same code inside directive it works but try to get the value through service it is showing 0 for both. Please find the below code and let me know the code which I missed out here.
Custom Service:
(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.factory("InputCheckService", function(){
var defaultText = document.getElementById("input-text-area");
var selStart = defaultText.selectionStart;
var selEnd = defaultText.selectionEnd;
var selectedText;
if(selStart != selEnd){
selectedText = defaultText.value.substring(selStart, selEnd);
}else{
selectedText = null;
}
return {
selStart: selStart,
defaultText: defaultText,
selEnd: selEnd,
selectedText: selectedText
};
});
}());
The directive where I called this services. I already included the service inside the main controller in different file.
(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.directive("generalDirective", generalDirective);
function generalDirective(){
return {
scope: true,
controller:function($scope, InputCheckService){
$scope.collapsed = false;
$scope.CollpasePanel = function(){
$scope.collapsed = !$scope.collapsed;
};
$scope.updatePara = function(){
alert(InputCheckService.defaultText+"Selection start: "+InputCheckService.selStart+" Selection End: "+ InputCheckService);
/**
* defaultText: defaultText,
selStart: selStart,
selEnd: selEnd,
selectedText: selectedText
*/
}
},
templateUrl: 'directive/general-directive.html'
};
}
}());
If you need any more details, please let me know.
Thanks in advance for your time and suggestion.
Regards,
Robin
You should not use service to manipulate DOM element. You should manipulate DOM only at directives. Your problem is you DONT have anywhere to listen to TEXTAREA SELECTION EVENT and your service will not update the data inside. I have created a fiddle for your problem. The watchSelection directive is based on this answer from stackoverflow. Something you should notice :
I use service only to store data. Something like selStart, selEnd or paragraphContent and provide some API to retrieve the data
.factory("InputCheckService", function () {
return {
setSelStart: function (start) {
selStart = start;
},
.....
},
});
On the watchSelection directive, you watch for the mouseup event and will perform update the service so that it will store value you need and later you can retrieve it from other directives or controllers.
elem.on('mouseup', function () {
var start = elem[0].selectionStart;
//store it to the service
InputCheckService.setSelStart(start);
});
In your generalDirective directive you can get value from your service and angular will auto update the view for you.
Hope it helps.
Just starting out with AngularJS. Trying to build a single page app to display slides/pages of my comic, one at a time.
The data is getting pulled in from a JSON file, and that's working correctly. But Angular is throwing errors when I try to set up some basic binding. Any thoughts..?
HTML
<span ng-bind-html="showCurrentTitle"></span>
JS
var comicsApp = angular.module('comicsApp', ['ngSanitize']);
comicsApp.controller('comicsCtrl', ['$scope', '$http',
function comicsCtrl($scope, $http) {
$http.get('/luv-slimline/test/comics.json').success(function(data) {
$scope.comics = data.comics;
});
$scope.showCurrentTitle = function() {
return $scope.comics[0].title;
}
} //end ComicsCtrl
]);
Error
TypeError: Object function () { return $scope.comics[0].title; } has no method 'indexOf'
If I strip out the ngSanitize module, then the error message changes.
Alt error
Error: [$sce:unsafe] http://errors.angularjs.org/undefined/$sce/unsafe
And if I swap out the ng-bind-html directive for the older-style mustache braces, then the error message changes again.
Alt error (2)
Error: [$interpolate:interr] http://errors.angularjs.org/undefined/$interpolate/interr?p0=%7B%7BshowCurr…()%7D%7D&p1=TypeError%3A%20Cannot%20read%20property%20'0'%20of%20undefined
Help, please?
Cheers,
Dan
I'm not familiar with the errors you are receiving, or ng-sanitize or the ng-bind-html tag. However, your javascript code looks problematic to me.
var comicsApp = angular.module('comicsApp', ['ngSanitize']);
comicsApp.controller('comicsCtrl', ['$scope', '$http',
function comicsCtrl($scope, $http) {
//so this runs immediately, but . . .
$http.get('/luv-slimline/test/comics.json').success(function(data) {
// . . . this is going to happen async, so this value won't be set
//before the initial binding occurs
$scope.comics = data.comics;
});
$scope.showCurrentTitle = function() {
// . . . as a result, comics will be undefined initially.
return $scope.comics[0].title;
}
} //end ComicsCtrl
]);
I think you need to define an initial value for $scope.comics before your http.get. Something like:
$scope.comics = [];
$scope.comics.push({title: "testTitle"});
Edit
Based on your comment, if you are now just binding to showCurrentTitle (which I would rename to currentTitle, as it makes more sense), you shouldn't even need to initialize $scope.comics--it should work without that code.