不允許在Angular表達式中引用DOM節點

我開始使用指令，一切都很順利。但現在我卡住了。我得到一個錯誤Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: report.getContent()，我看不到我參考的是哪種DOM節點。也許我只是傾倒！？不允許在Angular表達式中引用DOM節點

我有一個範圍函數會得到一個report實例：

$scope.showReport = function() { 
      reportFactory.getLatestReport().then(function(report) { 
       $scope.report = report; 
      }); 
     };

我report對象：

// report.js 
return function(data) { 
    return { 
     content: new Content(data['content']), 

     getContent: function() { 
      return content; 
     } 
    } 
};

模板這是在地方，那麼將調用指令（？）：

<div ng-show="report"> 
    <my-report></my-report> 
</div>

myReport指令：

.directive('myReport', function() { 
     return { 
      templateUrl: 'report/report' 
     }; 
    })

返回的模板包含一個指令，以及：

<my-report-content content="report.getContent()"></my-report-content>

MyReportContent指令：

.directive('myReportContent', function() { 
     return { 
      templateUrl: 'report/content', 
      scope: { 
       content: '=' 
      } 
     }; 
    })

報告模板（report/content），但不能正常工作，因爲錯誤被拋出：

<div ng-if="content.hasFoo()"> 
    <div ng-include="'report/foo'"></div> 
</div> 

<div ng-if="!content.hasFoo()"> 
    <div ng-include="'report/bar'"></div> 
</div>

來源

2016-01-14 messy

如果創建一個小提琴，它會更容易看到的錯誤。 –

好主意。那是在小提琴的過程中，我發現了我的問題的根源。報告對象中的getContent（）函數返回content，而不是this.content。所以它試圖獲取模板的內容對象（''my-report-content'''）。 – messy

錯誤：

// report.js 
return function(data) { 
    return { 
     content: new Content(data['content']), 

    getContent: function() { 
     return content; 
    } 
    } 
};

右：

// report.js 
return function(data) { 
    return { 
     content: new Content(data['content']), 

    getContent: function() { 
     return this.content; 
    } 
    } 
};

來源

2016-01-14 08:45:26 messy

不允許在Angular表達式中引用DOM節點

回答

相關問題