3

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

这是一个简单的例子。
我创建了一个名为searchBox（查看完整源代码和演示）的指令

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: {}（查看完整源代码和演示））它不再起作用，但我在控制台中看不到任何错误。

我确定这是我做错的基本事情，但我真的希望有人能睁开我的眼睛并帮助我理解这一点。

4

1 回答 1

5

得到它的工作。

问题是该指令应该包含它自己的模板（或将transclude 选项设置为 true），因为您正在包装其他元素。

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

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

于 2013-11-12T19:45:42.667 回答