Question

我是角度自定义指令的初学者。我只使用自定义指令基于控制器范围值渲染两个html模板。渲染html ng-click =＆＃34; myclick（）＆＃34;事件不适用于两个模板。

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 ')
    }
});

Answer 1

$scope.gridOptions={data:'test',
ColumnDefs:[
DisplayName:'Select Gender',
field:'Gender',
CellTemplate:'<div><input type='text'></div>' ]};

在您的控制器中，但您的指令是$scope.myclick = function(){ alert('clicked me ') }范围，因此您需要通过isolate传递myclick，或者使用指令控制器方法来定义scope : {myclick: "&"}。

Answer 2

您需要使用注入的范围来定义控制器中的数据和功能：

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

应该是

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

Answer 3

使用：

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

ng-click不在指令模板内部工作

3 个答案: