Question

我试图使用在指令中声明的变量＆＃39; import apple.laf.JRSUIConstants; import com.apple.laf.AquaButtonBorder; import java.awt.EventQueue; import java.util.Objects; import javax.swing.AbstractButton; import javax.swing.JButton; import javax.swing.JFrame; public class AquaAlwaysDefaultButtonExample { public static void main(String[] args) { EventQueue.invokeLater(() -> { final JFrame frame = new JFrame("Aqua Always Default Button Example"); final JButton defaultButton = new JButton("Default Button"); frame.getContentPane().add(defaultButton); defaultButton.setBorder(new AlwaysDefaultAquaButtonBorder()); frame.getRootPane().setDefaultButton(defaultButton); frame.pack(); frame.setLocationByPlatform(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); }); } public static class AlwaysDefaultAquaButtonBorder extends AquaButtonBorder.Dynamic { @Override protected JRSUIConstants.Widget getStyleForSize(final AbstractButton b, final JRSUIConstants.Size size, final int width, final int height) { if(b != null && b.getRootPane() != null && Objects.equals(b, b.getRootPane().getDefaultButton())) { return JRSUIConstants.Widget.BUTTON_PUSH; } return super.getStyleForSize(b, size, width, height); } } }在指令视图中使用html。

我试图使用的变量是来自对象的int，它是（此对象）声明为$ scope变量名为slider。

我试图展示它：

link: function

打印值为<div> {{ slider.step }} </div>，并且它不会发生变化。它一直是1并且它不想重新绑定:(虽然我稍后会在代码中更改此值。请查看完整的指令代码。我改变了它的值几个地方：

..在指令链接功能..

aa : 1

我在link: function($scope, el) { $scope.slider = { step: 1, changeSlide: function (step) { if(step === 1) { this.step = 1; console.log('changed step to 1: ' + $scope.slider.step); } if(step === 2) { this.step = 2; console.log('changed step to 2: ' + $scope.slider.step); } } } $timeout(function () { var i = 1; $scope.slider.changeSlide(i); setInterval(function () { i++; if(i === 3) i = 1; $scope.slider.changeSlide(i); }, 5000); }); }中进行了分步。

基本上这是正确工作的垂直滑块。唯一遗漏的是，我无法从视图中访问当前步骤，而且我无法显示＆＃34;当前选择了哪个幻灯片＆＃34;的正确活动点。这就是为什么我需要在视图中使用此步骤但我不能。

Here是plnkr演示。

Answer 1

数据更改后您必须使用$timeout(function(){ $scope.$apply(); });

工作示例

angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.hello = 'World';
}

angular.module('plunker').directive('elements', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      name: '='
    },
    template: `<div>
    {{ slider }}
</div>`,
    link: function($scope, el) {

      $scope.slider = {
        step: 1,
        changeSlide: function(step) {
          console.log(11, step)
          if (step === 1) {
            this.step = 1;
            console.log('changed step to 1: ' + $scope.slider.step);
          }
          if (step === 2) {
            this.step = 2;
            console.log('changed step to 2: ' + $scope.slider.step);
          }
          $timeout(function(){ $scope.$apply(); });
        }
      }
      var i = 1;

      $timeout(function() {
        $scope.slider.changeSlide(i);
        setInterval(function() {
          i++;
          if (i === 3) i = 1;
          $scope.slider.changeSlide(i);
        }, 5000);
      });
    }
  };
});

<!doctype html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script>
    document.write("<base href=\"" + document.location + "\" />");
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <elements></elements>
</body>

</html>

双向数据绑定不受指令链接函数angularjs的影响

1 个答案: