I have a simple rails application., Hoping to get some input for this block of code that is not working.
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
I have a controller defined in angular amp.js. Here is the source code for that js file
var MyController= function() {
console.log("AM getting here");
var controller=this;
var greet = function () {
return "howdy";
}
controller.greet=greet;
}
angular.module('myapp',[]).controller('MyController', MyController);
Here is the html file where am calling this method
<div ng-app>
<p id="notice"><%= notice %></p>
<h1>Listing Users</h1>
<p>The value is {{1+1}}</p>
<input ng-model="firstName" ng-model-options="{updateOn: 'blur'}"/>
<p>Hi {{firstName}}</p>
<div ng-contoller="myappMyController as myController">
Hello {{ myController.greet() }}
</div>
</div>
The copy of the application layout html file is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/favicon.ico">
<title>AngularVenkat</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>-->
</head>
<body>
<%= yield %>
</body>
</html>
Any recommendations or things I have not addressed.
Here you have defined your controller as MyController:
angular.module('myapp',[]).controller('MyController', MyController);
Here you are trying to reference it as myappMyController (plus you have a typo on ng-controller):
<div ng-contoller="myappMyController as myController">
You need to change one or the other so they both match either MyController or myappMyController.
Related
Here's my view:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/dropdownhover")
#Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app>
<div class="navbar-fixed-top">
#if (User.Identity.IsAuthenticated)
{
#Html.Action("_Index", "MainMenu")
}
</div>
<div class="container body-content">
#RenderBody()
<footer class="footer navbar-fixed-bottom">
<div ng-if="User.Identity.IsAuthenticated" style="margin:10px;">
Hello, #ViewBag.User
</div>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/dropdownhover")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/bootbox")
#RenderSection("scripts", required: false)
</body>
</html>
For some reason, it would seem that "User.Identity.IsAuthenticated" is either false or undefined as far as angular is concerned, as my "Hello, #ViewBag.User" is never visible. But the "User.Identity.IsAuthenticated" above that, which shows my main menu, works fine.
I assume I'm missing something silly, but I can't seem to figure out what, as I'm doing it the same as another article on here instructed.
add # before the 2nd User.Identity.IsAuthenticated
Correction: should be '#User.Identity.IsAuthenticated' === 'True'
However, Razor doesn't like ng-** so they should be used as data-ng-**, to prevent razor from parsing those
I cannot figure out why the template intellij creates for me produces all these error. Even better the angular is not working. I cut and pasted some simple angular code from online sources to test it and put the Angular script inside index.html with no luck.
Here is my current code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</head>
<body ng-app="myApp">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Controller: (clickablecontroller.js)
angular.module('myApp',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Errors:
I was just following an AngularJS tutorial online, and basically they gave the following FIDDLE as an example. Now I tried the example locally and it doesn't work. My HTML looks like the below:
<!doctype html>
<html class="no-js" lang="" ng-app="" >
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript"
src="https://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script type="text/javascript"
src="script.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated.
-->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
</body>
</html>
And my script.js file looks like below:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'#attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
Now why is my example not working locally? What am I doing wrong?
I do get an error in the console with the following:
Error: Argument 'MyCtrl' is not a function, got undefined
at Error (native)
at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:488)
at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
Works fine for me, I'm only insert the module name to ng-app tag: myModule
<html class="no-js" lang="" ng-app="myModule" >
I am new to Fuel UX and trying to make checkbox work. I have the following simple page:
<!DOCTYPE html>
<html lang="en" class="fuelux">
<head>
<meta charset="utf-8">
<title>Fuel UX 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.11.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="checkbox" id="myCheckbox">
<label class="checkbox-custom" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load 22234</span>
</label>
</div>
<script>
//javascript initialization goes here
</script>
</body>
</html>
I need to initialize the checkbox via Javascript. The following works:
$('#myCustomCheckbox1').checkbox();
The following are not working:
$('input[type="checkbox"]').each(function(index, item) {
$(this).checkbox();
});
or
$('input[type="checkbox"]').checkbox()
Could any expert confirm that checkboxes must have id if they are initialized via Javascript? Or I did it in a wrong way?
Please review the documentation. The checkbox jQuery plugin can only be bound to the label, not the wrapping div (if present), nor the input.
You might try:
$('.checkbox > label').each(function(index, item) {
$(this).checkbox();
});
i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');