Question

我是AngularJS的新手。我想为两个指令使用一个模板。在交易中，第一个指令覆盖了第二个指令的行为。但我为每个人指定了不同的控制器。我认为原因是控制器隔离了范围。我需要第一个控制器执行自己的filterChanged（）函数，第二个控制器也是如此。与字段相同：蒙太奇，付费，取消和不活动。我试图操纵范围（true，'isolate'，false，{}），transclude（true，false，'element'），范围字段（'@'，'='，'＆amp;'）。 'controllerAs'和'controllerBindTo'不适合我的任务，因为我想抛出单独的控制器文件。

帮帮我吧。双手摔倒。

下面的源代码。

filter.html

<div class="filter">
<p class="text-center"><b ng-bind="::title"></b></p>
<div class="contact-item-requires-filter">
    <div class="contact-item-require">
        <input id="contact-item-montage-filter" class="contact-item-require-montage" type="checkbox"
            ng-model="filter.montage"
            ng-change="filterChanged()">
        <label title="Монтажи" for="contact-item-montage-filter"></label>
    </div>
</div>

directive1.js

angular.module('qualityControl')
.directive('requiresFilterDirective', function() {
    return {
        templateUrl: '../templates/pages/quality/filter.html',
        controller: 'requiresFilterController'
    }
});

directive2.js

angular.module('qualityControl')
.directive('usersFilterDirective', function() {
    return {
        templateUrl: '../templates/pages/quality/filter.html',
        controller: 'usersFilterController'
    }
});

更新。

Answer 1

使用'＆amp;'添加变量，这是函数声明

.directive('requiresFilterDirective', function () {
        return {
            restrict: 'AE',
            scope: {
                functionToCall: '&',
                someData: '='
            },
            templateUrl: '../templates/pages/quality/filter.html',
            link: function (scope, elem, attrs) {
                scope.functionToCall();
                console.log('scope.someData', scope.someData);
            }
        }
    })

用法：

<requires-filter-directive function-to-call="myFunctOne()" some-data="yourJsonObject"></requires-filter-directive>

<requires-filter-directive function-to-call="myFunctTwo()" some-data="yourJsonObject"></requires-filter-directive>

并在主控制器中声明这些功能：

$scope.myFunctOne = function() {
    alert("111")
};

$scope.myFunctTwo = function() {
    alert("222")
};

$scope.yourJsonObject = {'aaa':123};

两个指令，相应的控制器对和相同的templateUrl

1 个答案: