I'm having trouble understanding how an attribute selector can be used to restrict the scope of a controller. Here's the minimal controller code:
import 'package:angular/angular.dart';
#NgDirective(
selector: '[my-controller]',
publishAs: 'ctrl'
)
class MyController {
String foo = 'fooooooooooooo';
}
main() {
ngBootstrap(module: new Module()
..type(MyController));
}
And here is the view that uses that controller:
<!DOCTYPE html>
<html>
<body>
<div>
<!-- DOES NOT WORK. MAKES SENSE. -->
<p>Outside ng-app: {{ctrl.foo}}</p>
</div>
<div ng-app>
<div my-controller>
<!-- WORKS. MAKES SENSE -->
<p>Inside my-controller div: {{ctrl.foo}}</p>
</div>
<!-- WORKS. WHY? It is outside the div with the my-controller attribute -->
-->
<p>Outside my-controller div: {{ctrl.foo}}</p>
</div>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
Predictably, the {{ctrl.foo}} code does not work outside the element with the ng-app. Also predictably, {{ctrl.foo}} works inside <div my-controller>. But I don't understand why it works outside <div my-controller>. Any ideas?
The issue is that you are using NgDirective not NgController. NgDirective does not create its own scope and hence the leak. Switching to NgController should solve the issue.
I believe the issue lies in the fact #NgDirective does not create it's own scope...
Try #NgComponent and move your:
"Inside my-controller div: {{ctrl.foo}}"
into its template property.
Related
i have code like this
<div ng-app="">
<script type="text/ng-template" id="/tpl.html">
I am from a template.
</script>
<div ng-include="'/tpl.html'"></div>
</div>
<script> angular.module('a', []);</script>
<div ng-app="a">
<script type="text/ng-template" id="/tpla.html">
I am from a template a.
</script>
<div ng-include="'/tpla.html'"></div>
</div>
<script> angular.module('b', []).controller('myCtrl', function ($scope) {});</script>
<div ng-app="b" ng-controller="myCtrl">
<script type="text/ng-template" id="/tplb.html">
I am from a template b.
</script>
<div ng-include="'/tplb.html'"></div>
</div>
the output is :
I am from a template.
why when i use "ng-include" inside a module it doesn't work? do i missing anything?
Angular considers only the first found ng-app attribute when it bootstraps the application. The second one ng-app="a" is simply ignored.
If you want to have multiple Angular applications on the same page, you will need to bootstrap them manually (without using ngApp directive) using angular.bootstrap method.
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle
I have a few partial templates where the location is changed based on user actions via ng-click:
<div ng-include="contentUrl"></div>
<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>
This works great unless I the button above is inside of the partial itself, so if testScriptForm.html has a button:
<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>
Then nothing happens.
This seems due to ng-include getting a new (inherited but not shared?) scope.
What I can't figure is how to get the included template (partial) to change its own location.
I did try a function to change the $scope.$parent.contentUrl, it does seem to change but not "propagate" the changes.
In coffeescript:
$scope.changeParentLocation = (location) ->
$scope.$parent.contentUrl = location
Also tried to $scope.$apply() and $scope.$parent.$apply() in there and get the error:
Error: [$rootScope:inprog]
http://errors.angularjs.org/1.2.0rc1/$rootScope/inprog?p0=%24apply
Maybe I'm just mis-using includes...
Escape the isolated scope with "dotted model" reference:
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="script.js"></script>
<script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html">
<h1>This is testScriptForm.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button>
</script>
<script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html">
<h1>This is testScriptCase.html</h1>
<button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button>
</script>
</head>
<body>
<div ng-controller="Ctrl">
<fieldset>
<div ng-include="tpl.contentUrl"></div>
</fieldset>
</div>
</body>
</html>
function Ctrl($scope) {
$scope.tpl = {};
$scope.tpl.contentUrl = '/partials/testScriptForm.html';
}
My templates contain JS, as they are called JS is not executed, you have an idea please.
For example in my JS file script.js, i have methods that apply to HTML elements in my templtes and it does not work, an idea please.
Example :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app>
<ng-include src="'header.html'"></ng-include>
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
header.html
<div id="header">
<div id="logo">AngularJs</div>
<div id="nav"></div>
</div>
script.js
$(document).ready(function(){
$('#nav').html('<ul><li><a href="">Link<a></li></ul>');
});
The script execute well, I feel it does not find the element div#nav.
The solution provided by Youssef can be made "more Angular", and it will not require jQuery:
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
<p ng-class="color">Content of template2.html</p>
</script>
$scope.myFunction = function() {
$scope.color = 'red';
}
http://jsfiddle.net/mrajcok/MfHa6/
In the Angular world, we try to change model properties (e.g., $scope.color) and let the view update automatically. We try to not look up elements by ID or jQuery selectors, and we try to avoid DOM manipulation in the controller -- e.g., $('#tpl2').addClass('red');
Sorry, I read wrong a part of your question, my mistake.
The DOM ready statement of jQuery will probably not work correctly. What you can do is on your ngInclude tag add a onload="FUNCTION_NAME" that contains the DOM edition you indicated inside the script.js
For more information have a look at the documentation here: http://code.angularjs.org/1.0.1/docs-1.0.1/api/ng.directive:ngInclude
--- Old Post ---
#YoussefElMontaser, you don't have to put the quotes on the ngInclude:
<ng-include src="header.html"></ng-include>
probably that is what is wrong with your script not going forward.
Let me know if that worked.
I found the solution:
http://jsfiddle.net/esjeY/
HTML
<div ng-app="">
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
</div>
<div ng-include src="template.url" onload='myFunction()'></div>
</div>
JS
function Ctrl($scope) {
$scope.templates = [{
name: 'template1.html',
url: 'template1.html'
}, {
name: 'template2.html',
url: 'template2.html'
}];
$scope.template = $scope.templates[0];
$scope.myFunction = function() {
$('#tpl2').addClass('red');
}
}
#guiligan : Thanks for your help.