为什么我的指令的选择被绑定到控制器？ [英] Why isn't my directive's selection being bound to the controller?

问题描述

我有一个非常简单的指令，我的工作 - 这是围绕一个下拉的小包装。我想，我可以双向绑定到控制器从中暴露出的属性，selectedOption（当然，选择的选项）。我给自己定的指令范围的属性（并将其设置为我本以为这允许双向绑定=），再曝主控制器上的属性。

我已经附加一个例子。我本来期望所显示的默认项是测试版。如果我改变选择，以阿尔法，控制器值将被更新为A。但是，这不会发生 - 他们似乎即使我已经指出，该物业应提供给控制器被隔离

什么code的神奇位我在这里丢失？

\r

\r

角\r
    .module（'应用'，[]）;\r
\r
angular.module（应用）。控制器（测试，函数（）{\r
    VAR VM =这一点;\r
    \r
    vm.inv ='B';\r
    vm.displayInv =功能（）{\r
        警报（'INV：'+ vm.inv）;\r
    };\r
}）;\r
\r
angular.module（应用）\r
       .directive（'inventorytest'，函数（）{\r
    返回{\r
        限制：'E'，\r
        模板：'＆LT;选择NG模型=ctrl.selectedOptionNG选项=。INV code作为inv.desc在ctrl.invTypes INV＆GT;＆LT; /选择＆GT; {{} ctrl.sample }。选择：{{ctrl.selectedOption}}'，\r
\r
        适用范围：{selectedOption：'='}，\r
        控制器：功能（）{\r
            this.invTypes = [\r
                {code：'A'，说明：阿尔法}，\r
                {code：'B'，说明：布拉沃}，\r
                {code：'C'，说明：查理}，\r
            ];\r
            this.sample =你好;\r
        }，\r
        controllerAs：CTRL\r
    }\r
}）;

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/angular.js/1.4.7/angular.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=test作为VM＆GT;\r
    ＆LT; inventorytest选择的选项='vm.inv'＆GT;＆LT; / inventorytest＆GT;\r
    ＆LT;按钮NG点击=vm.displayInv（）＆GT;显示与LT; /按钮＆GT;\r
    ＆LT; BR /＆GT;\r
    控制器：{{vm.inv}}\r
＆LT; / DIV＆GT;

\r

\r

\r

解决方案

默认情况下，角创建范围对象（通常是指有变量 $范围）的每个HTML模板。

的范围：{selectedOption：'='} 在code实际上是为指令创建一个隔离的范围，并使 selectedOption 上范围对象的属性。

行 controllerAs：CTRL是在同一范围对象指向控制器创建一个属性对象。

这实际上意味着，在控制器，你可以的技术上的访问控制$ parent.selectedOption ，这将返回 selectedOption 的 CTRL 对象的父，这是范围的财产。在实践中，然而，这是非常麻烦的。

在角1.3，添加新的选项， bindToController：真正的。该选项自动绑定从范围的属性：定义的 controllerAs：对象的而不是 范围本身。

I've got a very simple directive I'm working with - it's a small wrapper around a dropdown. I want to expose an attribute, "selectedOption" (well, selected-option) from it that I can two-way bind to the controller. I've set the property in the scope of the directive (and set it to = which I thought would allow the two-way binding), then exposed a property on the main controller.

I've attached an example. I would have expected that the default item shown would be "Beta". And if I changed selections to Alpha, the Controller value would be updated to "A". But that doesn't happen - they appear to be isolated even though I've specified that this property should be available to the controller.

What magic bit of code am I missing here?

angular
    .module('app', []);

angular.module('app').controller('test', function(){
    var vm = this;
    
    vm.inv = 'B';
    vm.displayInv = function () {        
        alert('inv:' + vm.inv);
    };
});

angular.module('app')
       .directive('inventorytest', function () {
    return {
        restrict: 'E',
        template: '<select ng-model="ctrl.selectedOption" ng-options="inv.code as inv.desc for inv in ctrl.invTypes"></select>{{ctrl.sample}}. Selected: {{ctrl.selectedOption}}',

        scope: { selectedOption: '='},
        controller: function () {
            this.invTypes = [
                { code: 'A', desc: 'Alpha' },
                { code: 'B', desc: 'Bravo' },
                { code: 'C', desc: 'Charlie' },
            ];
            this.sample = 'Hello';
        },
        controllerAs: 'ctrl'
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="test as vm">
    <inventorytest selected-option='vm.inv'></inventorytest>
    <button ng-click="vm.displayInv()">Display</button>
    <br/>
    Controller: {{vm.inv}}
</div>

解决方案

By default, Angular creates a scope object (most commonly referred to with the variable $scope) for each HTML Template.

The scope: { selectedOption: '='}, in your code is actually creating an isolated scope for the directive, and making selectedOption a property on that scope object.

The line controllerAs: 'ctrl' is creating a property on this same scope object which points to the controller object.

This actually means that in the controller, you could technically access ctrl.$parent.selectedOption, which would return the selectedOption property of the ctrl object's parent, which is scope. In practice, however, this is very cumbersome.

In Angular 1.3, a new option was added, bindToController : true. This option automatically binds the properties from the scope: definition to the controllerAs: object instead of scope itself.

这篇关于为什么我的指令的选择被绑定到控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！