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.
Related
I have a directive to display a bootstrap's popover where user can update some value. The problem is that my value is not visible as an input's value (it's bind, I can edit it). Same value is visible inside the popover just next to the input.
HTML
<div custom-popover popover-html="<div><span>{{costPrice}}</span><input type='text' ng-model='costPrice' /></div>"></div>
JS
$(elem).popover({
trigger: 'manual',
html: true,
content: () => {
var content = $compile(attr.popoverHtml)(scope);
return content;
},
placement: 'bottom'
});
Demo
It's of course some piece of whole project only, but it shows the issue. Any idea of how to make this value visible inside the input?
I think I finally figured out what's the issue.
You are using jquery for pop-over as it's not a good practice to use the jquery code with angular
Here in your case you are using angular and what ng-model does is it continuously watch on the element value and if it's change it calls the digest cycle to update all the values as per the model and vice versa.
So, as you have given the angular code to jquery content function it can cause the angular to stop watching for costPrice which you can see in popover if you implement it by ui-bootstrap popover or any other angular third party popovers then you can see the effects. Here is the code for that,
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<button style="margin:70px;" uib-popover-template="dynamicPopover.templateUrl" popover-placement="bottom-right" popover-title="{{dynamicPopover.title}}"
type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.content" class="form-control">
</div>
</script>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
</script>
</div>
</body>
</html>
So as I said you gave the html with angular code to jquery to handle it and jquery cant handle the angular code so you get the error.
Hopefully this will help :)
This code is virtually verbatim from egghead.io, but it is not working at all unless I remove ="app" and remove the ng-controller attribute from the <body> element. (And of course the last <script> element gets ignored in the process—the code that would normally be in app.js.) Of course removing those bits prevents anything else from working or being added.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
<script src="http://code.angularjs.org/angular-ui-router-1.0.0.min.js"></script>
<script>
angular.module('app', ['ui.router'])
.controller("FirstCtrl", function FirstCtrl() {
var first = this;
first.greeting = "First";
});
</script>
</head>
<body ng-controller="FirstCtrl as first">
<div>
<input type="text" ng-model="first.greeting" placeholder="First Name">
<hr>
<h1>{{ first.greeting }} World!</h1>
</div>
</body>
</html>
Here's similar code on JSFiddle. (It's only similar because JSFiddle imposes constraints that make it impossible to post identical code. It has the same problem, so I assume the differences are insignificant for tracking down the source of the bug.)
Where is the bug? Why is this not working?
With latest angular dependency it worked for me.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>
angular.module('app', ['ui.router'])
.controller("FirstCtrl", function FirstCtrl() {
var first = this;
first.greeting = "First";
});
</script>
</head>
<body ng-controller="FirstCtrl as first">
<div>
<input type="text" ng-model="first.greeting" placeholder="First Name">
<hr>
<h1>{{ first.greeting }} World!</h1>
</div>
</body>
</html>
You are using angular ui-router but not using it the way you are supposed to be. Check the documentation here to get a clearer idea. Angular UI router loads its contents in a container containing ui-view attribute. As per documentation
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in Angular core, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
You need to load different states in your ui-view and also pass values in different states in the process. You need to add dependencies for $stateProvider and $urlRouterProvider in your app config for a completely functional angular ui router implementation. This being told what you need to do is like below -
And also check out the working example in PLUNKER
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html",
controller: function($scope) {
$scope.greeting = "First";
}
})
})
</script>
</body>
</html>
I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
i'm new to angular, so started with very basic example, but this is also not working. so please help me out. below code should write the content of textbox to the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
<script src="/script/angular.js" type="text/javascript"></script>
</body>
</html>
ng-app should be inside html or body, inside whichever tags you intend to use angular.
In your code ng-app scope is ending with in head tags only. You haven't used ng-app at root level. You can use it at html or body or main div tag level. And there is no ng-controller in your markup. Of course you can also configure controller through js file also.
You use below code.
HTML
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"> </script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
ng-app should be in html tag, not head.
put ng-app in tag, not in head tag
Remove ng-app directives which is added to head tag and assign it to html
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