Question

我有一个手风琴，动态地添加了html控件。我试图找出当任何儿童控制装置变脏时如何将手风琴面板的颜色改为黄色;已经感动了。这是我到目前为止的plnkr代码。 [1]：http://plnkr.co/edit/MdMWysRUEtGOyEJUfheh?p=preview

下面的布局。

<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.cs" rel="stylesheet">
     <link href="style.css" rel="stylesheet">
  </head>

  <body  ng-controller="bookcontroller">
    <accordion id="accordion_{{$index+((currentPage-1)*20)+1}}" close-others="true">
  <accordion-group is-open="isopen" >
       <accordion-heading class="container-fluid grey">
        Book Hearder
       </accordion-heading>
    <form name="form">
      <div class="form-row" ng-repeat="record in records">
       <table>
          <tr ng-formfield></tr>
       </table>
     </div>
    </form>
  </accordion-group>
  </accordion>
  </body>
</html>

SCRIPT.JS代码

var app = angular.module("app", ['ui.bootstrap']);


    app.controller('bookcontroller', ['$scope', function ($scope) {

    $scope.records=[
          {
           RecordId: 91,
           Type:'Label',
           Label: 'Favoritebook'
         },
          {
           RecordId: 92,
           Type:    'Dropdown',
            Label:  'Favoritebook',
            DDLValue: [{ 'value': '1', 'text': 'HarryPotter' }, 
                       { 'value': '2', 'text': 'StarGate' }]

          },
          {
           RecordId: 93,
           Type:'Text',
           Label: 'The TextBox'
         }]

    }
]);




app.directive('ngFormfield', function ($compile) {
        return {
            link: function (scope, element, attrs) {

                if (scope.record.Type == 'Label') {

                    element.html('<label togglecolor type="label" ng-model="record.DDLValue.value"/>' + scope.record.Label + '</label>');

                }
                else if (scope.record.Type == 'Text') {
                    element.html('<td colspan="8">'+scope.record.Label + ': <input togglecolor type="text" name="fname"></td>');
                }
                else if (scope.record.Type == 'Dropdown') {
                    element.html('<td colspan="8"><select class="btn btn-default dropdown" togglecolor ng-model=record.DDLValue.value ng-options="obj.value as obj.text for obj in record.DDLValue"></select></td>');
                }

              $compile(element.contents())(scope);
            }
        }
    });

 app.directive('togglecolor', [function(){
    return{
        restrict: 'A',
        link: function(scope, element, attrs, controller){
            scope.$watch(function() {return element.attr('class'); }, function(newValue){
                debugger;
                if (element.hasClass('ng-dirty')) {
                  element.parent().addClass('toggle-yellow');
                } else {
                  element.parent().removeClass('toggle-yellow');
                }
            });
        }
    }
}]);

知道如何让这个togglecolor指令工作吗？

Answer 1

我认为问题出在togglecolor指令中。看来element.parent（）不是要更改其颜色的元素。

我建议您选择要明确更改的元素。

在html中，加载jQuery并将id添加到要更改其颜色的元素：

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

    ...

    <accordion-group id="bookHeader" is-open="isopen" >

在js中，使用jQuery按id选择元素，如果它是脏的则更改颜色：

    if (element.hasClass('ng-dirty')) {
      $('#bookHeader').addClass('toggle-yellow');
    }

Answer 2

您可以使用ngClass来完成此任务。通过在窗体上附加影响控制器中变量的ngChange指令。

附加额外的观察者会增加性能开销，因此您希望尽可能避免这种情况。

此外，为此表单使用表格可能没有意义。看起来您正在使用它进行格式化？

角度手风琴面板颜色变化

2 个答案: