Develop Reference

Background image not showing up in AngularJS

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>

Ng-repeat in custom directive does not repeat

I'm trying really hard, but I can't find where is my problem.
I created a custom directive and it should iterate some HTML to draw the right content on the screen.
The problem is that my ng-repeat does not iterate my array. I search on stackoverflow but what I found didn't help me.
Here is my directive (it's in an external file):
app.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'view/templates/log-tab.html',
replace: true,
controller: ['$scope', 'api', function($scope, api) {
$scope.logState = false;
$scope.logData = [1,2,3,4];
$scope.loadLog = function() {
api.doRequest({
path : $scope.path,
method : "GET",
broadcast : BK_LOG
});
};
var bk = $scope.$on(BK_LOG, function(key, value){
$scope.logState = true;
console.log($scope.logData);
bk();
});
}]
};
});
And here is the directive HTML that will be rendered:
<md-tab ng-click="loadLog()" label="{{i18n['REVISIONS']}}">
<div layout="row" layout-align="center" layout-padding ng-show="!logState">
<div layout="column">
<div>
<md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
</div>
<div>
{{i18n['LOG_LOAD']}}
</div>
</div>
</div>
<div layout="row" ng-show="logState" layout-padding>
<div layout="column">
<div ng-repeat="xyz in logData">
{{xyz}}
SOME CONTENT HERE
</div>
</div>
</div>
</md-tab>
Thanks in advance!

I removed other components from your directive code and kept it at bare minimum. The code is working fine as expected. Please see below.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body ng-app="myApp" >
<logtab></logtab>
<script src="angular.js" type="text/javascript "></script>
<script src="app.js" type="text/javascript "></script>
</body>
</html>
app.js
var myApp = angular.module('myApp', []);
myApp.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'log-tab.html',
replace: true,
controller: ['$scope', function($scope) {
$scope.logState = false;
$scope.logData = [1,2,3,4];
console.log('hi');
}]
};
});
log-tab.html
<div>
{{logData}}
<div layout="row">
<div layout="column">
<div ng-repeat="xyz in logData">
{{xyz}}
</div>
</div>
</div>
</div>
Please use a couple of console.log's to identify the exact location. I suspect that there must be some thing wrong with the other parts of the directive or may be logState is set to false??

You can always separate the controller from the directive:
app.directive('logtab', function(){
return {
restrict: 'E',
templateUrl: 'view/templates/log-tab.html',
replace: true,
scope: {
log: '='
}
};
});
Then in your controller
app.controller('MyController', ['$scope', 'api', function($scope, api) {
$scope.logTab = {
state: false,
data: [1, 2, 3, 4],
loadLog: function() {
api.doRequest({
path : $scope.path,
method : "GET",
broadcast : BK_LOG
});
}
};
var bk = $scope.$on(BK_LOG, function(key, value){
$scope.logTab.state = true;
console.log($scope.logTab.data);
bk();
});
}]);
Then change your HTML to:
<md-tab ng-click="log.loadLog()" label="{{i18n['REVISIONS']}}">
<div layout="row" layout-align="center" layout-padding ng-show="!log.state">
<div layout="column">
<div>
<md-progress-circular md-mode="indeterminate" md-diameter="130"></md-progress-circular>
</div>
<div>
{{i18n['LOG_LOAD']}}
</div>
</div>
</div>
<div layout="row" ng-show="log.state" layout-padding>
<div layout="column">
<div ng-repeat="xyz in log.data">
{{xyz}}
SOME CONTENT HERE
</div>
</div>
</div>
</md-tab>
And call it with
<logtab log="logTab"></logtab>

Updated my answer based on OP's explanation.
Created a fiddle here: https://jsfiddle.net/frishi/bzbbo5da/14/
I simplified the directive definition a little, removed the api part of it.
I also changed the directive's template to include the ng-repeat part of it.
//....
restrict: 'E',
template: `<p><div ng-repeat="xyz in logData">
{{xyz}}
SOME CONTENT HERE
</div></p>`,
replace: false,
scope: true, // <- needs to be set
//....
You are missing the scope parameter in the directive definition object. You have to set it to scope: true for your directive's template to be able to access a variable defined on the directive controller's scope.

AngularJS: Directive does not have access to controller when element is nested

Question: Why doesn't my simple directive have access to its controller when the element is used on certain pages?
Additional Info: The directive works on the main page. The HTML I could not use my directive on is called using ui-view and is included below.
<div ui-view></div>
Directive:
var postcardAppDirectives = angular.module('postcards.directives', ['postcards.controllers']);
postcardAppDirectives.directive('postcardLink', function () {
return {
restrict: "AE",
template: '<div class="well">{{ ctrl.ownerObj.user }}</div>',
controller: 'postcardLinkController as ctrl'
}
});
Controller:
var PostcardsControllers = angular.module('postcards.controllers', ['postcards.factories', 'postcards.services']);
PostcardsControllers.controller('postcardLinkController', [function ()
this.ownerObj = {
"user": 'test_owner',
"pointofthis": 'inane testing'
}
}]);
HTML (Does Not Work):
<div ng-controller="DashboardAccountController as infoCtrl" class="container full-container">
<!------------------ DIRECTIVE REFERENCE HERE -------->
<postcard-link></postcard-link>
<h1>
<small>Welcome</small>
<username-text></username-text>
</h1>
<img ng-show="infoCtrl.user.member_profile.profile_image" ng-src="{{ infoCtrl.user.member_profile.profile_image }}"
style="min-height:100px;height:100px;" alt='profileImage'/>
<button type="button" class="btn btn-link col-md-offset-2" ng-click="infoCtrl.loadPage()">Modify Account</button>
<div class="row">
...
HTML (Working Fine)
<ng-include src="'static/app/carousel/_carousel.html'"></ng-include>
<postcard-link></postcard-link>
<div class="container">
<section style="text-align: center">
<h1>How It Works</h1>

I see you used different module that's why one module don't know another module directive. you should use same module.
Like:
js:
var app = angular.module('postcards', []);//add dependencies in []
app.directive('postcardLink', function () {
return {
restrict: "AE",
template: '<div class="well">{{ ctrl.ownerObj.user }}</div>',
controller: 'postcardLinkController as ctrl'
}
});
app.controller('postcardLinkController', [function () {
this.ownerObj = {
"user": 'test_owner',
"pointofthis": 'inane testing'
}
}]);
use as usual html:
<postcard-link></postcard-link>

AngularJs directives issue

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.

Variable doesn't change value in angular controller

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>