My custom background image is not showing up in AngularJS. Can't figure out why.
When I test $scope.setBackground in console, I get Object {background-image: "url(image.jpg)"}
Controller:
app.controller('backgroundImageCtrl', function($scope, $http) {
$scope.setBackground = {
'background-image' : 'url(image.jpg)'
};
})
HTML:
<script type = "text/ng-template" id="/page.html" ng-controller="backgroundImageCtrl" ng-style="setBackground">
<div>
...
</div>
</script>
var app = angular.module('myApp', []);
app.controller("myCtrl", function ($scope) {
$scope.style= {};
$scope.setBackground = function (date) {
$scope.style = {
'background-image': 'url("https://www.gravatar.com/avatar/10821c595d354140ee66f2a04fb11b7c?s=32&d=identicon&r=PG&f=1")'
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="setBackground()">set background</button>
<div ng-style="style">see the background</div>
</div>
</div>
Simple solution as suggested by #Mosh Feu, simply place ng-controller="backgroundImageCtrl" and ng-style="setBackground" in an inner div
<script type = "text/ng-template" id="/page.html">
<div ng-controller="backgroundImageCtrl" ng-style="setBackground">
...
</div>
</script>
you should use setBackground in div that use your template. try like this.
<div ng-include src="/page.html" ng-style="setBackground"></div>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
$scope.setBackground = {
'background-image' : 'url(https://www.gravatar.com/avatar/10821c595d354140ee66f2a04fb11b7c?s=32&d=identicon&r=PG&f=1)'
};
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
$scope.setBackground = {
'background-image' : 'url(https://www.gravatar.com/avatar/6755dcaf172d19cb9976bedcc56cfed3?s=48&d=identicon&r=PG&f=1)'
};
});
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<div ng-app = "mainApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view ng-style="setBackground"></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id="viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
Related
I have a viewA and corresponding ControllerA but on click of an image on viewA i have to navigate to another ViewB and corresponding ControllerB, in ViewB have some check boxes then have a button on viewB that takes us to ViewA, then again i want to click the image on ViewA and Navigate to ViewB and restore the checkBox values (Checked, Unchecked). I have stored the values of checkboxes to service variable.
<body ng-app='demo'>
<script type="text/ng-template" id="home.html">
<h1> viewA </h1>
<img src="src" />
</script>
<script type="text/ng-template" id="about.html">
<h1> viewB </h1>
<h4>Click me to see ViewA: <input id="myCheckBox" type="checkbox" ng-model="checked" ng-change='checkView()'></h4>
</script>
<div>
<div ng-view></div>
</div>
</body>
script:
var demo = angular.module('demo', []);
demo.controller('HomeController', function ($scope) {});
demo.controller('AboutController', function ($scope,$location) {
$scope.checkView=function(){
//if($scope.checked)
if($('#myCheckBox').prop('checked') == true)
$location.url('/home');
}
});
demo.config(function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
}).
otherwise({
redirectTo: '/home'
});
});
TRY THIS CODE:
I have this
"items" : ["<p>Item 1</p>","<span>Item 2</span>"]
I would like this
<div id="container">
<p>Item 1</p>
<span>Item 2</span>
</div>
How can I do it without using ng-repeat ?
You can use directly like this..
$scope.itemNames = {"items" : ["<p>Item 1</p>","<span>Item 2</span>"]};
<div ng-bind-html-unsafe="itemNames.items"> </div>
or else
use $sce.
.controller('ctrl', ['$scope', '$sce', function ($scope, $sce) {
$scope.itemNames = {"items" : ["<p>Item 1</p>","<span>Item 2</span>"]};
$scope.newNames= $sce.trustAsHtml($scope.itemNames.items);
}]);
<div ng-bind-html="newNames"> </div>
In AngularJS you can use the ng-bind-html directive to print html and for that you must include the $sanitize service.
Now, to pass the array as an html string to the view you can use Array.prototype.join():
angular
.module('App', ['ngSanitize'])
.controller('AppController', ['$scope', function ($scope) {
var obj = {
"items": ["<p>Item 1</p>","<span>Item 2</span>"]
};
$scope.items = obj.items.join('');
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.10/angular-sanitize.min.js"></script>
<div ng-app="App" ng-controller="AppController">
<div id="container" ng-bind-html="items"></div>
</div>
Can I do ng-view in angular directives. I tried but this error showing.
Error: [$injector:unpr] http://errors.angularjs.org/1.2.13/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
my code :
index.html
<body ng-app="Learning">
<div ng-controller="learning">
<div ng-switch-when="1" >
<div introduction-page></div>
</div>
</div>
</body>
app.js
var Learn = angular.module("Learning",['ngRoute']);
Learn.directive("introductionPage", function() {
return {
restrict:'EA',
transclude:false,
templateUrl:'views/intro.html',
replace:true,
controller: introController
}
function introController($scope,$http,$location) {
$scope.onClick = function() {
$location.path('course');
}
}
});
Learn.config(function($routeProvider) {
$routeProvider
.when('/course', {
templateUrl : 'views/course-ch1.html',
controller : 'courseController'
})
.otherwise({redirectTo: '/'});
});
function courseController($scope) {
alert("in course");
}
intro.html
<div style="width:100%;height:662px">
INTRODUCTION........
<div ng-view></div>
<input type="button" style="width:100px;height:40px;" label="enter" ng-click="onClick()">
</div>
Is it possible to do this way?
Thanks
You can have ng-view in directive but with the help of transclude : true,property:-
Like
<div introduction-page>
<ng-view></ng-view>
</div>
As shown in example here :- http://plnkr.co/edit/0813dA?p=preview
I have created two directives and included them in my html. However, only the first one executes and nothing after it.
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div directive-one=""/>
<div directive-two=""/>
<div> Hello I am {{name}} and I am {{age}} years old!</div>
</div>
<script type="text/ng-template" id="myTemplate.html">
<div>Name: <input type='text' ng-model='name'/></div>
</script>
</div>
Javascript:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.name = "Jason";
$scope.age = "20";
});
app.directive('directiveOne', function () {
return {
replace: true,
template: "<div>Age: <input type = 'text' id = 'age' ng-model='age'>
</input></div>"
}
});
app.directive('directiveTwo', function () {
return {
replace: true,
templateUrl: "myTemplate.html"
}
});
Here is the fiddle: DEMO
Can't figure out what the issue is. Any help is appreciated.
You have to close your div tags with the directives in them and you don't need the ="" after either.
<div directive-one></div>
<div directive-two></div>
Here's an updated fiddle with it working.
I have html page with
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>
And angular controller:
myModule.controller('MyCtrl', function($scope, $location) {
$scope.myVar = false;
$scope.someAction = function() {
$location.path('/anotherPath');
$scope.myVar = true; // changes in controller, but not in view
}
});
My module is
var myModule = angular.module('myModule', ['ngRoute']).config(function ($routeProvider) {
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl'
})
.otherwise({
redirectTo: '/anotherPath.html'
})
});
anotherPath.htmlcontains only
<input data-ng-click="someAction()" type="button" class="btn" value="Some action">
After clicking on this input controller changes path, but in view value of myVar is still false. Why?
Here, you have defined your controller twice. Once on the parent div:
<div ng-controller="MyCtrl">
And once on the route for /anotherPath:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: 'MyCtrl' <-- This will be assigned to <div ng-view>
})
Leaving you with something like:
<div ng-controller="MyCtrl">
<div ng-view ng-controller="MyCtrl">
</div>
</div>
Therefore, when you call $scope.someAction() you are calling the function defined on the controller assigned to your inner view, rather than the function defined on the parent controller.
You should give your View its own unique controller in the route definition:
Angular:
$routeProvider
.when('/anotherPath', {
templateUrl: 'anotherPath.html',
controller: function($scope) {
// You don't necessarily need an implementation here
}
})
HTML:
<div ng-controller="MyCtrl">
<div ng-view>Some content</div>
myVar: {{myVar}}
</div>