Question

我为一个页面创建了指令，该页面为内容添加了一些动画。 html看起来像这样：

<div flip-animation>
  <span flip-animation-left>
    <img src="/images/viceralfat.png">
  </span>
  <figcaption flip-animation-right>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </figcaption>
</div>

所以当你在div中看到flip-animation还有两个childrend flip-animation-left和flip-animation-right时，我想做的就是抓住flip-animation并检查它孩子是左还是右。如果它是正确的我有一个功能，但如果它剩下我有另一个功能。我的问题是如何检查它是正确还是离开

修改这是我的指示：

'use strict';

'use strict';

angular.module('myApp')
  .directive('flipAnimation', function($window) {
    return {
      restrict: 'A',
      link: function(scope, elem) {
        // here I wonna check if its right or left
      }
    };
  });

Answer 1

在＆＃34; parent＆＃34;的controller中定义一个函数。将由其子指令使用的指令。然后，在子指令内部使用require以访问父指令的controller，以便子指令可以使用其父指令函数。

像这样：

angular.module('myApp')
.directive('flipAnimation',['$window', function($window) {
    return {
        restrict: 'A',        
        controller: function(){
            this.flip = function(flipRight){
                if(flipRight){
                    //Code for Flip Right here
                }else{
                    //Code for Flip Left here
                }                
            }
        },
        link: function link(scope, elem, attrs) {}
    }
}])
.directive('flipAnimationpRigth',function() {
    return {
        restrict: 'A',        
        require: '^flipAnimation',         
        link: function link(scope, elem, attrs, ctrl) {
            ctrl.flip(true);
        }
    }
})
.directive('flippAnimationLeft',function() {
    return {
        restrict: 'A',        
        require: '^flipAnimation',         
        link: function link(scope, elem, attrs, ctrl) {
            ctrl.flip(false);
        }
    }
});

范围内的范围。 AngularJS

1 个答案: