Question

我在理解Angular指令中的隔离范围时遇到了一些麻烦。我已经阅读了官方文档，观看了很多关于这个主题的视频，所以现在我知道它们的用途是什么，但我不确定如何使用它们。

这是一个简单的例子我创建了一个名为searchBox的指令（参见full source and demo）

var myApp = angular.module('myApp', []);

myApp.directive('searchBox', function($timeout) {
  return {
    restrict: 'A',
    scope: true,
    link: function(scope, element) {                
      scope.open = false;

      // Show search input
      scope.showInput = function() {
        scope.open = true;

        // Focus the input
        $timeout(function() {
          element.find('input').focus();
        }, 0);
      };

      // Hide search input
      scope.hideInput = function() {
        scope.open = false;
      };
    }
  }
});

这实际上按预期工作。但是，我想隔离指令的范围，但如果我将scope: true更改为scope: {}（请参阅full source and demo））它不再有效，但我看不到任何错误控制台。

我确信这是基本的我做错了，但我真的希望有人可以睁开眼睛帮我理解这一点。

Answer 1

Got it working

问题是指令应该包含它自己的模板（或者包含transclude option set to true），因为你要包装其他元素。

如果在search-box指令中的模板内定义了其他指令（如ng-click或ng-blur），则会针对搜索框$ scope评估它们。但是如果没有模板，它们会冒泡到父$ scope（在这种情况下，没有函数showInput（）或hideInput（）等）。

如果您不想在指令声明中使用html字符串，可以使用templateUrl选项引用外部模板。

指令的孤立范围

1 个答案: