Я новичок в угловых пользовательских директивах. Я просто отрисовываю два 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 ')
    }
});
1
sanman 10 Янв 2017 в 09:59

3 ответа

Лучший ответ
$scope.myclick = function(){
    alert('clicked me ')
}

Находится в вашем контроллере, но ваша директива имеет вид isolate, поэтому вам нужно либо передать myclick через scope : {myclick: "&"}, либо использовать метод контроллера директив для определения myclick.

3
Thalaivar 10 Янв 2017 в 07:04

Вам необходимо использовать введенную область для определения как данных, так и функций в вашем контроллере:

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

Должно быть

$scope.myclick = function(){
    alert('clicked me ')
}
0
Ovidiu Dolha 10 Янв 2017 в 07:02

Использование:

onclick="angular.element(this).scope().myclick()"
-1
GilZ 10 Янв 2017 в 09:13