ng-click 在指令模板中不起作用答案

【问题标题】：ng-click not working inside of directive's templateng-click 在指令模板中不起作用
【发布时间】：2017-01-10 06:59:25
【问题描述】：

我是角度自定义指令的初学者。我只是使用自定义指令根据控制器范围值渲染两个 html 模板。渲染 html ng-click="myclick()" 事件后对两个模板都不起作用。

view.html

<div ng-controller = 'ctrl1'>
     <div class="doc-list-wrapper" ></div>
</div>
<div ng-controller = 'ctrl2'>
    <div class="doc-list-wrapper" ></div>
</div>

模板

<script type="text/ng-template" id="tmpl-doc-list-wrapper">
        <ul>
            <li ng-repeat="doc in docs" >
                <a rel="external" ng-click="myclick()" >
                    <span >{{doc.stageName}}</span>
                </a>
            </li>
        </ul>
</script>

模板渲染

app.run(function ($templateCache) {
        $templateCache.put(
            'tmpl-doc-list-wrapper', jQuery('#tmpl-doc-list-wrapper').html());
    });

我的指令

app.directive('docListWrapper', ['$timeout', function ($timeout) {
        return {
            restrict: 'C',
            priority: 500,
            replace: true,
            templateUrl: 'tmpl-doc-list-wrapper',
            scope: { docs: '=docs'},
            link: function (scope, element, attrs) {
            }
        };
    }])

控制器

app.controller('ctrl1', function ($scope, $interval) {
    $scope.docs = [{"doc":"http://google.com","stageName":"Project 1"},
                        {"doc":"http://google.com","stageName":"Project 2"},
                        {"doc":"http://google.com","stageName":"Project 3"},
                        {"doc":"http://google.com","stageName":"Project 4"},
                        {"doc":"http://google.com","stageName":"Project 5"},
                        {"doc":"http://google.com","stageName":"Project 6"},
                        {"doc":"http://google.com","stageName":"Project 7"},
                        {"doc":"http://google.com","stageName":"Project 8"}];
    $scope.myclick = function(){
        alert('clicked me ')
    }
});

app.controller('ctrl2', function ($scope, $interval) {
    $scope.docs = [{"doc":"http://google.com","stageName":"Unit 1"},
                        {"doc":"http://google.com","stageName":"Unit 2"},
                        {"doc":"http://google.com","stageName":"Unit 3"},
                        {"doc":"http://google.com","stageName":"Unit 4"},
                        {"doc":"http://google.com","stageName":"Unit 5"},
                        {"doc":"http://google.com","stageName":"Unit 6"},
                        {"doc":"http://google.com","stageName":"Unit 7"},
                        {"doc":"http://google.com","stageName":"Unit 8"}];
    $scope.myclick = function(){
        alert('clicked me ')
    }
});

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

$scope.myclick = function(){
    alert('clicked me ')
}

在您的控制器中，但您的指令是isolate 范围，因此您需要通过scope : {myclick: "&"} 传递myclick 或使用指令控制器方法来定义myclick。

【讨论】：

正确答案 :) @sanman 阅读了有关 Angular 的孤立作用域的更多信息，要真正了解 Angular，这是一个关键点...
@sanman：你是如何将这些值传递给 docListWrapper 的，你能告诉我...
阅读这个 stackoverflow，你会得到更好的主意...检查您的指令 docListWrapper 是否正在从您使用它的 html 中获取这两个值...stackoverflow.com/questions/36455124/…
@Thalaivar app.directive('docListWrapper', ['$timeout', function ($timeout) { return { restrict: 'C', priority: 500, replace: true, templateUrl: 'tmpl -doc-list-wrapper'，范围：{ docs：'=docs'，myclick：“&”}，链接：函数（范围，元素，属性）{ } }; }]）。我试过了，但没有工作
你需要从这里传递它。 ...

【解决方案2】：

您需要使用注入作用域在控制器中定义数据和函数：

Scope.myclick = function(){
    alert('clicked me ')
}

应该是

$scope.myclick = function(){
    alert('clicked me ')
}

【讨论】：

【解决方案3】：

用途：

onclick="angular.element(this).scope().myclick()"

【讨论】：

angular.element 仅在debugInfo 可用时才有效。它可能会在生产中失败。