Question

将Angular 1.5与组件一起使用。

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

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

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

家长控制器：

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
            };
        }

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

Answer 1

要获得此推荐，您必须创建如下指令：

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

以组件方式

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

关键点是使用上面的使用范围属性，并说你的指令中的reset（在左侧部分重置）属性绑定了一个名为reset（= reset rigth part）的范围属性，其中“=”你说是你有一个双向数据绑定。

我希望这可以帮到你

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。开始，结束和速度是属性。

传递自定义指令的参数

2 个答案: