AngularJs 1.6 - 在指令 'link' 函数中无法访问父作用域

Question

我已经托管了我的示例应用程序 here 我正在尝试将 MainCtrl 变量访问到指令 'link' 函数中，但出现以下错误。

angular.js:14700 ReferenceError: testMessage is not defined
    at Object.link (TestDirective.js:12)
    at angular.js:1385
    at invokeLinkFn (angular.js:10545)
    at nodeLinkFn (angular.js:9934)
    at angular.js:10273
    at processQueue (angular.js:17051)
    at angular.js:17095
    at Scope.$digest (angular.js:18233)
    at Scope.$apply (angular.js:18531)
    at done (angular.js:12547) "<test-directive>"

我已经使用 requirejs 创建了 angular 应用程序。

    ------------main.js-----------------
    require.config{
       ///configuration here...
    });

    require(['app','angular','MainCtrl','TestDirective'],function(app,angular){
        angular.bootstrap(document,['MyApp']);
    });

    ---------------app.js-------------
    define(['angular','angular-resource'],function(angular){
        var ngapp = angular.module('MyApp',['ngResource']);   
        return ngapp;
    });

    -------------MainCtrl.js-----------------------
    define(['app'],function(app){
        app.controller('MainCtrl',function($scope){
            $scope.testMessage = "Variable from MainCtrl";
        })
    });

------------------TestDirective.js---------------------------
define(['app'],function(app){
    app.directive('testDirective',function(){
        return{
            restrict: 'E',
            templateUrl: 'js/TestDirective.html',
            link: function(scope){
                scope.innerVariable = "Inner variable";

                //testMessage is defined in MainCtrl
                //I can access this variable in view i.e. TestDirective.html
                //But can not access it below
                scope.ourterVariable = testMessage;
                scope.testFun = function(){
                      ///cant access MainCtrl variable here....
                }

            }
        }
    });
});

----------------index.html------------------
<!DOCTYPE html>
<html lang="en">

  <head>

    <title>Heroic Features - Start Bootstrap Template</title>
    <script src="node_modules/requirejs/require.js" data-main="js/main.js"></script>

  </head>

  <body ng-controller="MainCtrl">
      {{testMessage}}
      <test-directive></test-directive>
  </body>
</html>

我托管了这个应用here

加载页面后，我在访问 MainCtrl->testMessage 时在 <test-directive> 中遇到错误根据我以这种方式创建指令时的信息，指令将继承 [=16= 中的所有属性].
此外，我可以在指令的视图中访问 MainCtrl->testMessage，但不能在指令的 link 函数中访问。

请帮忙。

更新 1：

根据评论，我已更新代码以访问 MainCtrl 变量 scope.$parent.testMessage 现在我没有收到任何运行时错误，但 scope.$parent.testMessage 仍然是 undefined

Answer 1

Can you please try this :

<!DOCTYPE html>
<html lang="en">

  <head>

    <title>Heroic Features - Start Bootstrap Template</title>
    <script src="node_modules/requirejs/require.js" data-main="js/main.js"></script>

  </head>

  <body ng-controller="MainCtrl">
      {{testMessage}}
      <test-directive ourterVariable="{{testMessage}}"></test-directive>
  </body>
</html>

Answer 2

在 link 函数中使用 scope 前缀后，我能够访问 MainCtrl 范围变量。我的假设是，默认情况下它指的是父范围是错误的:) 下面是工作代码。

------------------TestDirective.js---------------------------
define(['app'],function(app){
    app.directive('testDirective',function(){
        return{
            restrict: 'E',
            templateUrl: 'js/TestDirective.html',
            link: function(scope){
                scope.innerVariable = "Inner variable";

                scope.ourterVariable = scope.testMessage;
                scope.testFun = function(){
                      ///To access ParentCtrl variable use scope
                      var pv = scope.parentVariable;
                }

            }
        }
    });
});

AngularJs 1.6 - 在指令 'link' 函数中无法访问父作用域

AngularJs 1.6 - Parent scope not accessible in directive 'link' function

requirejs

angularjs

angularjs-directive

angularjs-scope