div idパラメータをhtmlタグとして使用する

Question

私はフロントエンド開発でかなり新しいです。角度のある素材です。 私は親から他のhmtlのdiv要素にアクセスしようとしています。 私がやろうとしていること。

div.html

<div id="myDiv"> 
    <h1>My work in progress</h1> 
</div> 

main.htmlを

<div layout="row" id="chart-section"> 
<div flex="20" > 
    <myDiv />  
</div>  

私は同じアプリでそれを使用しています。

main_controller.js

(function() 
{ 
    'use strict'; 
    angular 
     .module('app.chart') 
     .component('chartSection', chartSectionComponent()); 

    /** @ngInject */ 
    function chartSectionComponent() { 
     return { 
      templateUrl: 'app/main/apps/chart/components/chart-section/chart-section.html', 
      controller: chartSectionController 
     } 
    } 

    /** @ngInject */ 
    function chartSectionController() {   
    }  
})(); 

myDivController.js

(function() 
{ 
    'use strict'; 

    angular 
    .module('app.chart') 
    .component('in-progress', inProgressComponent()); 

    /** @ngInject */ 
    function inProgressComponent() { 
    return { 
     templateUrl: 'app/main/apps/chart/components/in-progress/in-progress.html', 
     controller: inProgressController 
    } 
    } 

    /** @ngInject */ 
    function inProgressController(chartService, $log) { 

    } 
})(); 

主module.js

(function() 
{ 
    'use strict'; 

    angular 
     .module('app.chart', []) 
     .config(config); 

    /** @ngInject */ 
    function config($stateProvider, $translatePartialLoaderProvider) 
    { 
     // State 
     $stateProvider.state('app.restricted.chart', { 
      url  : '/chart/:chartId', 
      views : { 
       'content@app': { 
        template: '<chart />' 
       } 
      }, 
      params: { 
       chart: null 
      } 
     }); 

     // Translation 
     $translatePartialLoaderProvider.addPart('app/main/apps/chart'); 
    } 
})(); 

私はこのテーマを使用していますhttp://fuse-angular-material.withinpixels.com/dashboard-project 私はそれをどのように実施することができますか？ありがとうございました。

Answer 1

querySelectorを使用してIDで要素を取得し、次にangular.elementを使用して操作します（例：CodePen）。あなたはmain_controllerの中でこのテクニックを使うことができます。

マークアップ

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <div id="myDiv"> 
    <h1>My work in progress</h1> 
    </div> 
</div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages']) 

.controller('AppCtrl', function($element) { 
    var myDiv = angular.element($element[0].querySelector("#myDiv")); 
    myDiv.addClass("blah"); 
}); 

CSS

.blah { 
    color: red; 
} 

Element.querySelector() doc

angular.element doc