AngularJs 1.6 - 在指令'link'函数中无法访问父范围

时间:2017-11-21 09:55:47

标签: angularjs angularjs-directive angularjs-scope requirejs

我托管了我的示例应用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创建了角度应用程序。

    ------------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

加载页面后,<test-directive>访问MainCtrl->testMessage时出现错误。按照我的信息创建指令时,指令将继承MainCtrl中的所有属性。
此外,我可以在指令的视图中访问MainCtrl->testMessage,但不能在指令的链接函数中访问。

请帮忙。

更新1:

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

enter image description here

2 个答案:

答案 0 :(得分:0)

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>

答案 1 :(得分:0)

在链接函数中使用Sub CloseExcelFile(catCode As String, newWkBook As Workbook) If newWkBook Is Nothing Then Exit Sub End If newWkBook.Activate 'activate or this work sheet would not be able to save it is MsgBox ("Activated the workbook") Dim slash As String slash = "\" Dim ext As String ext = ".xlsx" Dim qualifiedFileName As String Dim onlyFileName As String onlyFileName = fileName + ext qualifiedFileName = salesReportPath + slash + onlyFileName 'Save the file Application.DisplayAlerts = False newWkBook.SaveAs fileName:=qualifiedFileName newWkBook.Close Application.DisplayAlerts = True End Sub 前缀后,我能够访问MainCtrl范围变量。我的假设,默认情况下它引用父范围是错误的:) 以下是工作代码。

scope