指令的隔离作用域

Question

指令的隔离作用域

angularjsangularjs-directiveangularjs-scope

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

我确定我做错了一些基本的事情，但我真的希望有人能给我指点迷津，并帮助我理解这个问题。

- Tamás Pap

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rvignacio · Accepted Answer

已解决。

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

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

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