Question

问题：我没有评估传递给指令控制器的属性。例如，我得到{{ attribute.value }}而不是5。

期望结果：我的指令控制器可以访问父控制器中对象中包含的主键。我需要它来进行类似MyResource.save({id: attribute});的API调用。

代码段：

从HTML调用指令

<div ng-controller="BoatDetailController as boatCtrl">
  <div class="row">
    <booking-widget boat-id="{{ boatCtrl.boat.id }}"></booking-widget>
  </div>

指令

(function () {
    'use strict';

    angular.
        module('trips').
        directive('bookingWidget', bookingWidget);

    bookingWidget.$inject = [];

    function bookingWidget() {
        return {
            restrict: 'E',
            scope: {
                boatId: '@'
            },
            templateUrl: "/static/app/trips/trips.bookingwidget.template.html",
            controller: 'BookingWidgetController as bookingCtrl'
        }
    }
})();

控制器的

(function () {
    'use strict';

    angular.
        module('trips').
        controller('BookingWidgetController', BookingWidgetController);

    BookingWidgetController.$inject = ['Trip', 'Booking', 'Messages', '$scope', '$attrs'];

    function BookingWidgetController(Trip, Booking, Messages, $scope, $attrs) {
        var vm = this;

        vm.boatId = $attrs.boatId;
        ...

        activate();

        //////////////////////////////

        function activate() {
            console.log(vm.boatId);
            //
        }

控制台结果：

使用$scope.boatId：（记录一个空行）

使用$attrs.boatId：{{ boatCtrl.boat.id }}（字符串）

回顾：我的指令的boat-id属性未解析。你能帮我弄清楚如何解决它吗？

Answer 1

您实际上可以创建一个这样的自定义指令：

var mapping = {
    0: ['A', 'B', 'C'],
    1: ['D', 'E', 'F'],
    2: ['G', 'H', 'I'],
    9: ['X', 'Z']
}

function combine(array, index1, index2) {
    var result = array[index1].map(function (el1) {
        return array[index2].map(function (el2) {
            return [el1, el2].join('');
        })
    });
    return [].concat.apply([], result);
}

function combineAll(array, indices) {
    var result = [];
    for (var i = 0; i < indices.length - 1; i++) {
        var index = indices[i];
        var nextIndex = indices[i + 1];
        result = result.concat(combine(array, index, nextIndex));
    }
    return result;
}

var combinations = combineAll(mapping, [1, 0, 9]);
console.log(combinations);
document.write(JSON.stringify(combinations, null, 2));

链接函数实际上允许您访问元素，指令的范围，与指令关联的属性以及指令的控制器。在执行与指令关联的所有内容后调用该函数。换句话说，这是最后一个阶段。

链接功能和控制器之间可以共享相同的范围。

现在，要进行API调用，您实际上可以在控制器中添加一个接受boatID的函数，调用API并接受对控制器对象的响应。之后，在链接函数中添加一个观察者，该函数会监视＆＃34; vm.boatId＆＃34;，您可以在其中调用进行API调用的函数。因此，即使控制器在链接功能之前已初始化，您仍然可以执行您想要的操作。因此，它将是一个基于链接的激活＆＃34;。

您可以尝试使用此解决方案。希望它有所帮助。

Answer 2

您可以传递一个功能并调用它。需要使用＆amp; 。

https://thinkster.io/egghead/isolate-scope-am

AngularJS：从控制器中访问元素指令的属性

2 个答案: