为什么我不能通过控制器访问作用域？

Question

我正在从事激情项目。而且我无法访问范围以将数据传递到后端框架工作。

这是我的索引文件

<div id="main-menu" ng-controller="appCtrl">
//some other code
  <div id="includedDocumentsFilter" style="float:right; display:none; padding-right: 10px;">
    <my-documents validate-options="validateDialogOptions()"  call-dialog="showDialog()"> </my-documents>
  </div>
//some other code
</div>

我的自定义指令

'use strict';
dbApp
    .directive('myDocuments', [
        function () {

                var documentTemplate =
                    ' <div class="caption-row">' +
                    '<kendo-button style="width:62px" ng-click="changeDocument(true)"> Ok </kendo-button>'+
                    '<kendo-button style="width:62px" ng-click="changeDocument(false)" > Revert changes </kendo-button>'+
                    '</div>' 
                    
            }

            return {
                scope: true,
                template: documentTemplate
            }
        }]
    )

我的控制器

        $scope.changeDocument = function (applyFilter) {
            if (applyFilter === true) {
            
            //Here is where I cant access $scope
            
            }

        }

Answer 1

首先，我在您的指令中看到了一个额外的右花括号。其次，在您的 html 代码中，div 中有 display:none，id 为 "includedDocumentsFilter"。只是想知道如果您隐藏了 div，您将如何能够看到指令中定义的模板。我使用上面提到的代码

在下面添加了一个有效的 jsfiddle link

dbApp.directive('myDocuments', [
    function () {

            var documentTemplate =
                ' <div class="caption-row">' +
                '<kendo-button style="width:62px" ng-click="changeDocument(true)"> Ok </kendo-button>'+
                '<kendo-button style="width:62px" ng-click="changeDocument(false)" > Revert changes </kendo-button>'+
                '</div>' 


        return {
            scope: true,
            template: documentTemplate
        }
    }]
)

JsFiddle link: https://jsfiddle.net/anilsarkar/gk2dfh1p/21/

注意：我在 jsfiddle

中用 span 替换了 kendo-button

为什么我不能通过控制器访问作用域？

Why can`t I access scope via controller?

javascript

kendo-ui

angularjs

angularjs-directive

angularjs-scope