AngularJS：从控制器内访问元素指令的属性 [英] AngularJS: Accessing an element directive's attributes from within a controller

问题描述

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

Problem: The attribute I pass to my directive's controller is not evaluated. For example, I get {{ attribute.value }} instead of 5.

期望的结果：我的指令的控制器访问包含在从父控制器对象的主键。我需要它来进行API调用，比如 MyResource.save（{ID：属性}）;

Desired Outcome: My directive's controller has access to a primary key contained in an object from a parent controller. I need it to make API calls like MyResource.save({id: attribute});.

code片段

的从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 ： （记录一个空行）

With $scope.boatId: (logs a blank line)

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

回顾：在我的指令船-ID 属性是不解析。你能不能帮我找出如何解决它？

Recap: The boat-id attribute of my directive is not resolving. Can you help me figure out how to fix it?

推荐答案

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

You can actually create a custom directive like this:

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

链接函数实际上可以让你有该元素的访问，该指令的范围，相关的指令和指令的控制器的属性。相关的指令都已经被执行之后被调用的函数。换言之，这是最后的阶段

The link function actually allows you to have an access to the element, the scope of the directive, the attributes associated to the directive and the controller of the directive. The function is called after everything associated to the directive has been performed. In other words, this is the last stage.

同样的范围将链接功能和控制器之间共享。

The same scope would be shareable between the link function and controller.

现在，让API调用，你实际上可能添加在控制器中一个函数接受boatID，使得调用API并接受到控制器对象的响应。此后，链接功能的手表超过vm.boatId，在其中您可以调用该函数，这使得API调用中添加一个观察者。因此，即使控制器已链接功能之前进行初始化，你仍然可以执行你想什么。因此，这将是一个基于链接的激活

Now, to make the API call, you may actually add a function in your controller that accepts the boatID, makes a call to the API and accepts the response onto the controller object. After that, add a watcher within the link function that watches over "vm.boatId", within which you may call that function which makes the API call. So, even if the controller has initialized before the link function, you would still be able to perform what you wish to. So, it would be a "link-based activation".

您可以给该方案一试。希望它帮助。

You may give this solution a try. Hope it helps.

这篇关于AngularJS：从控制器内访问元素指令的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！