角度：將變量傳遞給指令

Question

我希望將變量從控制器傳遞給我創建的指令：

的HTML

<div class="dropup inline-block" ng-repeat="event in video.events">
    <event video="video"></event>
</div>

指示

.directive("event", function() {
    return {
      restrict: "E",
      replace: true,
      scope:{
        video: '=videoObject'
      },
      template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button"  data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
      link: function(scope, elm, attrs) {
        elm
        .on('mouseenter', function() {
          elm.css('background-color', scope.video.color);
          elm.css('color','#FFFFFF');
        })
        .on('mouseleave', function() {
          elm.css('background-color','#FFFFFF');
          elm.css('color', scope.video.color);
        });
      }
    };

問題是，當我在返回的dict屬性中添加范圍時 ，它停止工作。

因此，這個想法是當我將鼠標移到元素上時，使用控制器$ scope中的變量video.color的值來更改元素的顏色。

我一直在其他帖子中尋找答案，但它們不起作用：

• 將變量從控制器范圍傳遞到指令
• 將AngularJS作用域變量從指令傳遞到控制器的最簡單方法？

Answer 1

如果視頻是對象，則添加video: '=video' ，
如果視頻是字符串，則添加video: '@video'

.directive("event", function() {
    return {
      restrict: "E",
      replace: true,
      scope:{
        video: '=video'
      },
      template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button"  data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
      link: function(scope, elm, attrs) {
        elm
        .on('mouseenter', function() {
          elm.css('background-color', scope.video.color);
          elm.css('color','#FFFFFF');
        })
        .on('mouseleave', function() {
          elm.css('background-color','#FFFFFF');
          elm.css('color', scope.video.color);
        });
      }
    };

Answer 2

好的，我找到了一個解決方案，視頻是控制器的作用域變量。 在返回的dict中將scope設置為false允許指令訪問控制器的范圍。

該網站中的解釋如下： https : //www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

當scope設置為“ true”時，AngularJS將通過繼承父范圍（通常是控制器范圍，否則是應用程序的rootScope）來創建新范圍。 對此新范圍進行的任何更改都不會反映回父范圍。 但是，由於新作用域是從父作用域繼承的，因此在Ctrl1（父作用域）中所做的任何更改都將反映在指令作用域中。

當scope設置為“ false”時，控制器Ctrl1和指令使用相同的scope對象。 這意味着對控制器或指令的任何更改都將同步。