HTML

Question

我正在尝试分享这两个指令之间的逻辑，我还在学习Angular，并且不太明白如何实现这一点。我收到了 $ compile：ctreq 错误。我已经看了一些教程，我相信逻辑应该在控制器中，但我得到一个错误，页面不会加载。我有一个简单的番茄钟计时器，并希望每个按钮都有自己的指令。也许我应该用控制器这样做，但无论哪种方式，我想知道它是如何工作的。感谢..

var app = angular.module('pomodoro_timer', ['ui.router', 'firebase']);

app.directive("timer", ['$interval', function($interval) {
  return {
    restrict: "E",
    transclude: true,
    controller: function() {

    },

    templateUrl: "/templates/timer.html",
    link: function(scope,element,attributes) {
      scope.intrvl;
      scope.t = 10;
      var tDiv = $(element).find('#time');
      scope.min = "25";
      scope.sec = "00";

      scope.interval = function() {
        scope.intrvl = $interval(function(){
          if (scope.t == 0) {
            scope.resetTimer();
            scope.sessionComplete = false;
          } else {
          scope.t -= 1;
          scope.displayTime()
          }
        },1000)
      }

      scope.toggleClass = function() {
      tDiv.toggleClass('notWorking working');
      }

    }
  };
}]);

app.directive('start', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    require: "^timer",
    templateUrl: '/templates/start.html',
    link: function (scope, element, attr, timerCtrl) {
      scope.startTimer = function() {
        if (tDiv.hasClass("notWorking")) {
          // scope.working = true;
          scope.interval(scope.t);
          scope.toggleClass();
        }
      };
    }
  };
});

HTML

<!DOCTYPE html>
<html ng-app="pomodoro_timer">
<head lang="en">
    <title>Pomodoro Timer</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.1/angularfire.min.js"></script>
</head>
<body>
  <timer></timer>
  <start></start>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript" src="/js/app.js"></script>
</body>
</html>

Answer 1

当您在require: '^timer'内使用start时，这意味着您假设您的start指令应位于timer指令内，以便start指令可以访问timer指令的控制器。

此外，您应该将expo-sable方法放在控制器中，而不是将其放入链接函数中，控制器可以通过需要此控制器的指令访问。

<强>标记

<timer>
   <start></start>
</timer>

<强>代码

app.directive("timer", ['$interval', function($interval) {
    return {
        restrict: "E",
        transclude: true,
        controller: function($scope) {
            $scope.interval = function() {
                $scope.intrvl = $interval(function() {
                    if (scope.t == 0) {
                        $scope.resetTimer();
                        $scope.sessionComplete = false;
                    } else {
                        $scope.t -= 1;
                        $scope.displayTime()
                    }
                }, 1000)
            };
            $scope.toggleClass = function() {
                tDiv.toggleClass('notWorking working');
            };
        },
        templateUrl: "/templates/timer.html",
        link: function(scope, element, attributes) {
            scope.intrvl = 0; //set default value
            scope.t = 10;
            var tDiv = $(element).find('#time');
            scope.min = "25";
            scope.sec = "00";
        }
    };
}]);

app.directive('start', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        require: "^timer",
        templateUrl: '/templates/start.html',
        link: function(scope, element, attr, timerCtrl) {
            scope.startTimer = function() {
                if (tDiv.hasClass("notWorking")) {
                    //calling method of `timer` directive controller
                    timerCtrl.interval(scope.t); 
                    timerCtrl.toggleClass();
                }
            };
        }
    };
});

在指令之间共享逻辑

HTML

1 个答案: