AngularJSに背景画像が表示されない

Question

私のカスタム背景画像がAngularJSに表示されません。理由を理解できません。

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> 

Answer 1

簡単な解決策は、単に内部のdivにng-controller="backgroundImageCtrl"とng-style="setBackground"を配置

<script type = "text/ng-template" id="/page.html"> 
    <div ng-controller="backgroundImageCtrl" ng-style="setBackground"> 
    ... 
    </div> 
</script> 

Answer 2

あなたのテンプレートを使用DIVでsetBackgroundを使用する必要があります

私はコンソールで$scope.setBackgroundをテストするとき、私はオブジェクト{background-image: "url(image.jpg)"}

コントローラーを取得します。このようにしてください。 @Mosh FEUにより示唆されるように

<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><a href = "#addStudent">Add Student</a></p> 
 
    <p><a href = "#viewStudents">View Students</a></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>

Answer 3

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>