Question

嗨我正在尝试使用angular指令在单击按钮时更改另一个元素的CSS，但是尽管console.log向我显示该类已添加，但仍在没有该类的检查器中。

ModalDirective

angular.module('App.shared.modal')
.directive('openModal', function (Config) {

  function link(scope, element, attrs) {
    element.bind('click', function() {
      var modal = angular.element(document.querySelector('#' + attrs.openModal)).css('display', 'block');
      setTimeout(function(){ modal.className += ' modal-in'}, 10);
    });
  }
  return {
    restrict: 'AEC',
    link: link
  };
});

查看哪个被称为指令

<header class="">
  <div class="u-max-full-width">
    <div class="row homehubusa-header">
      <div class="one-third column">
        <img src="./imgs/homehubusa.png" alt="logo homehubusa" class="logo"/>
      </div>
      <div class="two-thirds column">
        <ul class="menu u-pull-right">
          <li>
            <a href="#">HomesUSA</a><span class="separator">&nbsp;</span>
          </li>
          <li>
            <a href="#">Support</a><span class="separator">&nbsp;</span>
          </li>
          <li>
            <a href="#">Contact Us</a>
          </li>
          <li class="callsign">
            <a href="#" class="button button-danger" open-modal="modalLogin">Sign in</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

标题指令

  angular.module('App.shared.header')
    .directive('appHeader', function (Config) {

      function link(scope) {
        scope.navLinks = [
          {title: 'Home', href: 'home'},
          {title: 'Help', href: 'seed-help'}
        ];
      }
      return {
        templateUrl: Config.rootPath + 'shared/header/header-view.html',
        link: link,
        replace: true
      };
    });

应用结构

<body ng-app="App">  
  <app-header></app-header> /* This is the header directive, here is the button */
  <div class="ng-view"></div> /* Here is the modal */
  <app-footer></app-footer>
</body>

Answer 1

您无需使用timeout来应用CSS。请在此处查看简化示例：JSFiddle。

您最好addClass link: function(scope, element, attrs) { element.bind('click', function() { var target = angular.element(document.querySelector('#test')); target.css('display', 'block'); target.addClass('red'); });支持angular.element：

display: block

对于#modalLogin，我怀疑你的元素import android.support.v4.app.FragmentActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.RelativeLayout; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; public class MapsActivity extends FragmentActivity implements OnMapReadyCallback { private GoogleMap mMap; View mapView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_map); // Obtain the SupportMapFragment and get notified when the map is ready to be used. SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapView = mapFragment.getView(); mapFragment.getMapAsync(this); } /** * Manipulates the map once available. * This callback is triggered when the map is ready to be used. * This is where we can add markers or lines, add listeners or move the camera. In this case, * we just add a marker near Sydney, Australia. * If Google Play services is not installed on the device, the user will be prompted to install * it inside the SupportMapFragment. This method will only be triggered once the user has * installed Google Play services and returned to the app. */ @Override public void onMapReady(GoogleMap googleMap) { mMap = googleMap; mMap.setMyLocationEnabled(true); // Add a marker in Sydney and move the camera LatLng sydney = new LatLng(-34, 151); mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney")); mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney)); if (mapView != null && mapView.findViewById(Integer.parseInt("1")) != null) { // Get the button view View locationButton = ((View) mapView.findViewById(Integer.parseInt("1")).getParent()).findViewById(Integer.parseInt("2")); // and next place it, on bottom right (as Google Maps app) RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) locationButton.getLayoutParams(); // position on right bottom layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP, 0); layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE); layoutParams.setMargins(0, 0, 30, 30); } } }不存在，因为从我的例子来看，它正在运作：JSFiddle。

Answer 2

您可以检查$ apply（）方法。因为你正在使用setTimeout（）方法。 setTimeout（）是异步的，由JS引擎处理。不是Angular Compiler所以不知何故你需要告诉Angular我的Js引擎有改变的东西因此尝试使用apply（）。我不知道这会奏效。我的一个代码我做了这件事。它奏效了。

Angular指令不是将css类添加到另一个元素

2 个答案: