为自定义指令传递参数答案

【问题标题】：Pass parameter for custom directive为自定义指令传递参数
【发布时间】：2016-08-04 13:15:23
【问题描述】：

在组件中使用 Angular 1.5。

一些包含自定义指令的父 HTML：

<my-thing resetFields='$ctrl.bReset'></my-thing>

编辑：这里我应该使用reset-fields 而不是resetFields - 这就是为什么我得到下面未定义的原因。

父控制器：

function parentController() {
            var ctrl = this;
            ctrl.bReset= true;
        }

这是 myThing 的组件声明：

alert(ctrl.reset); // alert is called in controller, but shows undefined
function myThingComponent() {
            this.controller = {};
            this.bindings = {};
            var component = this;
            component.templateUrl = 'myThing.html';
            component.controller = myThingCtrl;
            component.transclude = true;
            component.bindings = {
                resetFields: '<' // one way binding is needed
            };
        }

如何发送此类参数并在自定义指令的控制器 - myThingCtrl 中使用它？如果重置值为 true，我将执行一些操作，如果设置为 false，我将执行另一个操作。（通常我猜的问题是 - 我如何从子组件中的父级读取值。）

【问题讨论】：

你的意思是bReset是你$scope的变量吗？
父组件控制器有bReset值。
你能给我们一个最小的例子（JSFiddle）吗？

标签： angularjs angular-directive

【解决方案1】：

为了达到这个目的，你已经创建了一个如下的指令：

angular.module("yourModule")
    .directive("myThing",function(){
        return {
            ...
            restrict : "E",
            scope:{
                    reset:"=reset",
                    ....
            },
            .....
            }
        }
    });

以组件方式

angular.module('yourModule').component('myThing', {
...
  bindings: {
    reset: '='
  }
});

听到的关键点是使用上面的范围属性，并说指令中的 reset（在左侧部分重置）属性与名为 reset（=reset rigth 部分）的范围属性绑定，并带有“=”你说哟有两种方式的数据绑定。

希望对你有帮助

【讨论】：

我们正在使用组件，我们没有模块？（我对这些角度细节不熟悉）
我按照 angular docs.angularjs.org/guide/component 的官方指南，我看到了这个使用模块
我整天坐在那个页面上……还没有结果。现在看来我可以取得进展了。
你可以在你的控制器中参考这个是你使用无范围的应用程序
组件是指令而非模块的新方式

【解决方案2】：

这是我制作的一个简单指令的示例，它呈现一个动画计数器。

function numberCounter($interval) {
    var directive = {
        restrict: 'E',
        scope: {
            start: '@start',
            end: '@end',
            speed: '@speed'
        },
        template: '<% number | number : 0 %>',
        link: link
    };

    ...
}

然后您可以在链接函数中使用 scope.start、scope.end 和 scope.speed。开始、结束和速度是属性。

【讨论】：