为自定义指令传递参数

Question

使用 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，则执行另一个操作。（通常我猜的问题是——如何从子组件中的父组件中读取值。）

Answer 1

为了实现这个提议，您创建了如下指令：

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

组件方式

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

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

希望对您有所帮助

Answer 2

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

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

    ...
}

那么你可以在link函数中使用scope.start、scope.end和scope.speed。开始、结束、速度是属性。

为自定义指令传递参数

Pass parameter for custom directive

angularjs

angular-directive