AngularJS 동적으로 ng 스타일 업데이트

Question

ng-repeat를 사용하여 만든 div 집합에 초기 배경색을 설정하려고합니다. 또한 마우스를 올리면 각 div의 배경색을 업데이트하려고합니다.

호버에서 올바른 색상을 볼 수 있지만 ng 스타일의 변수가있을 때 각 div의 초기 배경색을 어떻게 설정할 수 있는지 잘 모르겠습니다. 컨트롤러에서 프로젝트를 반복하고 컨트롤러에서 rgba 함수를 호출하려고했지만 모든 div에 마지막 배경색이 적용됩니다.

<section ng-controller="ProjectsCtrl" class="work"> 
    <div ng-repeat="project in projects" class="work-example" ng-style="{'background-color': '{{ project.background_color }}'}"> 
    <a href="#"> 
     <div class="inner" ng-style="{'background-image': 'url({{ project.image_url }})'}"> 
     <div class="type">{{ project.title }}</div> 
     <div class="client">{{ project.client }}</div> 
     <div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div> 
     </div> 
    </a> 
    </div> 
</section> 

내 컨트롤러 (레일 API 호출에서 오는) 육각을 가지고 RGBA로 바뀔 것이다라는 함수 RGBA 있습니다

은 여기 내 NG 반복 블록입니다. 여기

App.controller('ProjectsCtrl', ['$scope', 'Projects', function($scope, Projects) { 

    $scope.rgba = function(hex, opacity) { 
     var hex = hex.replace('#', ''), 
     r = parseInt(hex.substring(0,2), 16), 
     g = parseInt(hex.substring(2,4), 16), 
     b = parseInt(hex.substring(4,6), 16), 
     result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')'; 

     $scope.background = { 'background-color': result } 
    } 

    $scope.projects = Projects.query(); 
    } 
]); 

내 컨트롤러를 호출하는 서비스입니다 : 여기

App.factory('Projects', ['$resource', function($resource) { 
    return $resource('/api/projects/:id', { 
     id: '@id' 
    }); 
    } 
]); 

컨트롤러에서 겨 스타일을 업데이트 할 내 시도이다 (그러나 모든 div의 마지막 배경 색상 지정) :

$scope.projects = Projects.query(function(projects){ 
    angular.forEach(projects, function(value, index) { 
     $scope.rgba(value.background_color, '0.8'); 
    }); 
}); 

을

저는 AngularJS 세계에 처음 왔기 때문에이 모든 것이 의미가 있기를 바랍니다. 어떤 도움이라도 대단히 감사합니다. 감사!

Answer 1

때문에, 다음 코드이다 "가 된 div의 모든 마지막 배경색 것을 적용"이유.

$scope.rgba = function(hex, opacity) { 
    var hex = hex.replace('#', ''), 
    r = parseInt(hex.substring(0,2), 16), 
    g = parseInt(hex.substring(2,4), 16), 
    b = parseInt(hex.substring(4,6), 16), 
    result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')'; 
    $scope.background = { 'background-color': result } 
} 

$scope.projects = Projects.query(function(projects){ 
    angular.forEach(projects, function(value, index) { 
     $scope.rgba(value.background_color, '0.8'); 
    }); 
}); 

당신의 angular.forEach 실행, 그것은 최신 배경 색상에 $scope.background의 값을 업데이트 차례에 $scope.rgba를 호출한다. HTML 마크 업 안에 <div class="overlay" ng-style="background" ng-mouseover="rgba(project.background_color, 0.2)"></div>이 있는데 $scope에 background이라는 변수가 있습니다.

이 마크 업은 ng-repeat 안에 있습니다. 마크 업을 반복 할 때마다 ng-style에 동일한 값이 적용됩니다. $scope.background이 모두 같습니다.

대신 내가하는 것이 좋습니다.

Projects.query(function (projects) { 
    $scope.projects = projects; // <- $scope.projects is set when the query completes 
    angular.forEach(projects, function (value, index) { 
     $scope.rgba(project, '0.8'); 
    }); 
}); 

$scope.rgba = function(project, opacity) {   
    var hex = project.background_color.replace('#', ''), 
    r = parseInt(hex.substring(0,2), 16), 
    g = parseInt(hex.substring(2,4), 16), 
    b = parseInt(hex.substring(4,6), 16), 
    result = 'rgba('+ r + ',' + g + ',' + b + ',' + opacity + ')';   
    project.backgroundStyle = { 'background-color': result } 
} 

그리고 마크 업 :

<section ng-controller="ProjectsCtrl" class="work"> 
    <div ng-repeat="project in projects" class="work-example" ng-style="{'background-color': '{{ project.background_color }}'}"> 
    <a href="#"> 
     <div class="inner" ng-style="{'background-image': 'url({{ project.image_url }})'}"> 
     <div class="type">{{ project.title }}</div> 
     <div class="client">{{ project.client }}</div> 
     <div class="overlay" ng-style="project.backgroundStyle" ng-mouseover="rgba(project.background_color, 0.2)"></div> 
     </div> 
    </a> 
    </div> 
</section> 

나는 모든 최신 배경을 가진 div에의이 문제를 해결할 것이라고 생각합니다.

Answer 2

$resource.query은 실제 쿼리 결과 대신 약속이 포함 된 래퍼 개체를 반환합니다. 다음 코드 그래서

:

$scope.projects = Projects.query(function(projects){ 
    angular.forEach(projects, function(value, index) { 
     $scope.rgba(value.background_color, '0.8'); 
    }); 
}) 

당신은 실제로 약속 래퍼에 $ scope.projects 설정된다.

당신은 이런 식으로 변경해야합니다

Projects.query(function (projects) { 
    $scope.projects = projects; // <- $scope.projects is set when the query completes 
    angular.forEach(projects, function (value, index) { 
     $scope.rgba(value.background_color, '0.8'); 
    }); 
});