Nested App inside controller in angularJS - javascript

how can I achieve that structure in AnglularJS ?
<body ng-app="mainBodyAppWrapper">
<div ng-controller = "mainBodyController">
<div ng-app="myApp">
<div ng-controller="controller3">
First Name : <input ng-model="myApp_fName3" type="text"/>
Last Name : <input ng-model="myApp_lName3" type="text"/>
Hello {{myApp_fName3}} {{myApp_lName3}} !!!
</div>
<hr/>
</div>
</div>
</body>
in that case I have an error https://docs.angularjs.org/error/ng/areq?p0=controller3&p1=not%20a%20function,%20got%20undefined
Any one know about that kind of error solution? Please help me out

You cannot use multiple ng-app in a page. If you really need to use multiple modules, consider bootstraping the second module. For more info, read How to define two angular apps / modules in one page

Related

Why I can not acces $scope value from MainController within index.cshtml?

I am trying to create AngularJS, MVC ASP.Net single page application so
I have created new folder within my project which contains
app.js:
var myApp = angular.module('app', []);
and another folder containing MainController.js:
myApp.controller("MainController",['$scope', function ($scope) {
$scope.naslov = "MP3 Manager"}]);
next, inside Views/Home I have added this in my div tag
ng-app="app" ng-controller="MainController"
and finally I got this:
<div class="row" ng-app="app" ng-controller="MainController">
<div class="col-md-6">
<h2>Pjesme</h2>
<p>{{ naslov }}</p>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-6">
<h2>Playliste</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
when I run this app it shows {{ naslov }} instead of "MP3 Manager"
https://imgur.com/L1gmSBz
Why is this happening?
Make sure you have a reference to Angularjs, your app and your controller. I usually put the Angularjs reference and my app reference in my Layout.cshtml page, then the controller reference on the .cshtml page.
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/MainController.js"></script>
You need all three.
maby you can try <p ng-model="naslov ">{{naslov }}<p>
Firstly I agree with Martin Welker. You can't declare ngApp and ngController on the same element. It is not good practice.
Secondly check whether Angular is properly loaded. You could have a problem in your BundleConfig.cs file. Small typos can cause these silly errors.
Run it and check your browser console for any errors.

Using an angular directive stored in a variable in thymleaf

I am working on an issue in an application that mixes angularjs and thymeleaf. I want to build a template in thymeleaf that will allow me to use a variable to specify an angular attribute directive to use.
It seems like thymeleaf does not allow variables to be used as attributes. I have tried the following:
<div th:attr="${portlet.attrDirective}">
....
</div>
Didn't work
<div th:inline="text">
<div [[${portlet.attrDirective}]]>
...
</div>
</div>
Also didn't work
Am I doing something wrong?
There also is the possiblity of they portlet.attrDirective being null.
I got it working finally using the following code:
<div th:attr="${portlet.attrDirective == null} ? nodirective : ${portlet.attrDirective}=${portlet.attrDirective}">
...
</div>
Does anyone have a more readable solution?

Multiple Controller throwing error in my Angular JS application

I am a beginner in Angular JS. I know that below declaration is required in the js file to make angular JS Controller work.
var app = angular.module('myApp', []);
app.controller('ctrlOne', function(){
});
But recently got some code from internet where the declaration is not made for the app and controllers like above. But there are only controller function defined, still working fine but not in my case.
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please find my code below and output. Please correct me.
<div ng-app>
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
<div ng-controller="ctrlTwo">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="App.js"></script>
App.js:
function ctrlOne($scope){
};
function ctrlTwo($scope){
};
Please can any one help me to figure out where I went wrong. Your advice's are welcomed.
Please find JSFIDDLE Link : Have done above coding here
Change your html to include myApp module name like so:
<div ng-app="myApp">
...
<div ng-controller="ctrlOne">
<input type="text" ng-model="data.message" />
<h1>{{ data.message }}</h1>
</div>
...
</div>
Angular needs to know what is the name of your root module. ng-app directive specifies just that:
Use this directive to auto-bootstrap an AngularJS application. The
ngApp directive designates the root element of the application and is
typically placed near the root element of the page - e.g. on the
<body> or <html> tags.
There are two ways of initializing an angular app. One is to define ng-app in html or you can manually bootstrap angular app.
You need to figure out where is the app getting initialized. Because in your html you are using ng-app=''. you should provide it with app name.

Load angular template on some event

I'm quite new to angular and frontend in general, but what i'd like to see is something similar to what routing with ngView gives, but without routing, i.e just load a template on some event. To be more specific, let's say i have an input field somewhere in the header and when i click/focus on this field a special panel with different input options shows up. The trick is that this input field and other elements are already a part of a template which is loaded into ngView, so as i understand i can't use another ngView for options pane.
use ngIf, ngShow, ngHide, ngSwitch for stuff like that
<button ng-click="showStuff = true">Show Stuff</button>
<button ng-click="showStuff = false">Hide Stuff</button>
<div ng-show="showStuff">Showing Stuff</div>
<div ng-hide="showStuff">Hiding Stuff</div>
Have a look at this plunker for a quick and dirty, working example.
Note that the showStuff variable is just magically created by angular on the root scope, since I'm not using a controller.
You can load templates with ng-if and ng-include like this example:
<body ng-app="app">
<div class='container'>
<button ng-click='tmpl = true' class='btn btn-info'>Load template!</button>
<div ng-if='tmpl'>
<div ng-include="'template.html'"></div>
</div>
</div>
</body>
The ngIf directive will add element to the DOM when the argument expression is true. Then, the angular will compile the inner directive ngInclude, loading the template.

Editing and saving is not working

I have created an application in AngularJS with edit, save and cancel options, but the problem is that when I click the edit I am not getting the value for editing and saving.
The textfield and dropdowns are been provided through ng-transclude
Can anyone please tell me some solution for this
DEMO
HTML
<div ng-controller="LocationFormCtrl">
<h2>Editors</h2>
<span ng-repeat="location in location">
<div class="field">
<strong>State:</strong>
<div click-to-edit="location.state"><input ng-model="view.editableValue"/></div>
</div>
<div class="field">
<strong>City:</strong>
<div click-to-edit="location.city"><select ng-model="view.editableValue" ng-options="loc.city for loc in location"></select></div>
</div>
<div class="field">
<strong>Neighbourhood:</strong>
<div click-to-edit="location.neighbourhood"><input ng-model="view.editableValue"/></div>
</div>
<h2>Values</h2>
<p><strong>State:</strong> {{location.state}}</p>
<p><strong>City:</strong> {{location.city}}</p>
<p><strong>Neighbourhood:</strong> {{location.neighbourhood}}</p>
<hr>
</span>
</div>
Don't really know why, I was just playing around with the code, but seems working, at least with the text fields, using ng-if instead of ng-show/ng-hide: http://jsfiddle.net/T6rA9/1/
I'll update my answer if I find a reason...
Update: I think this is what you're looking for: http://jsfiddle.net/T6rA9/7/
The difference is that instead of saving the value on save, I am reverting the changes on cancel, which is easier due to angular two-way data-binding.
Because of that, I also removed the view.editableValue ng-model directive and used the fields as you would normally do.
Transclusion and isolated scopes does not work the way you may think. You can read more about it here http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
If you i.e. make this change you will already see a difference
<div click-to-edit="location.state"><input ng-model="location.state"/></div>
What about creating ngClick function which add input element inside your div with previous value?
<div class="newInput" ng-show="hidden">
<label> {{ inputValue }} </label>
</div>
<div class="newInput" ng-show="!hidden">
<input ng-model="inputValue" />
</div>
And main.js file:
app.controller('MyCtrl', function($scope) {
$scope.hidden = true;
$scope.inputValue = 'Edit me!';
$scope.addInput = function() {
$scope.hidden = !$scope.hidden;
}
});
Here you have Plunker

Categories