javascript - AngularJS Controller 变量未传递给子指令

Question

我有以下代码。我读到指令可以从它们的父作用域继承对象和变量。我有一个带有子指令的 Controller ，但我似乎无法在我的指令中获取我的 $scope.title。

这是为什么？

https://plnkr.co/edit/h4YlRPa5ZWQkwPZ3isjZ?p=preview

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

mod.controller('myControl', controlFunc).directive('myDirec', direcFunc);

function controlFunc($scope){
  $scope.title = "John Smith";
}
function direcFunc(){
  return {
    restrict: 'E',
    template: '<h1>' + $scope.title + '</h1>'
  };
}

Answer 1

您尝试在指令中访问范围的方式，您必须得到控制台错误 $scope is not defined，因为 $scope 不直接可用指令。

您不能直接使用 $scope 变量访问 HTML 上的变量。您应该使用 Angular Directive(指令)进行绑定(bind)，例如 ng-bind/{{}}(插值指令)在这种情况下会有所帮助。

您的指令模板应如下所示。

function direcFunc(){
  return {
    restrict: 'E',
    scope: false, //by default false, means will not create a new scope
    //template: '<h1>{{title}}</h1>', //alternative
    template: '<h1 ng-bind="title"></h1>'
  };
}

目前你的想法是不正确的，这里指令没有创建任何类型的子作用域。基本上默认情况下，指令使用 scope: false 选项，这表示指令不使用现有范围创建任何范围。如果你想确认指令范围与 Controller 的范围相同，那么你可以将 console.log(scope) 放在指令链接函数中。

function direcFunc(){
  return {
    restrict: 'E',
    scope: false, //by default false, means will not create a new scope
    //template: '<h1>{{title}}</h1>', //alternative
    template: '<h1 ng-bind="title"></h1>',
    link: function(scope, element, attrs){
        console.log("Below scope will be same as that of controller");
        console.log(scope);
    }
  };
}