javascript - 在指令 angularjs 中将 ng-model 作为参数传递

Question

我正在 AngularJs 中编写一个指令，我想将 ng-model 作为参数传递。

<div class="col-md-7"><time-picker></time-picker></div>

指令是:

    app.directive('timePicker', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<input type="text" class="form-control time-picker" ng-model="emp.signin">',
        link: function ($scope, element, form) {
            $(element).timepicker({'timeFormat': 'H:i:s'});
        }
    }
})

它工作正常，这里的 ng-model 是 emp.signin。我希望能够将此 ng-model 作为参数动态传递

这怎么可能？

Answer 1

你可以使用

<div class="col-md-7"><time-picker model-value="emp.signin"></time-picker></div>

Angular

app.directive('timePicker', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<input type="text" class="form-control time-picker"ng-model="modelValue ">',
        scope: {
            modelValue : '=',
        }
        link: function ($scope, element, form) {
            $(element).timepicker({'timeFormat': 'H:i:s'});
        }
    }
})

解释

The “=” prefix will create a two-way binding between the parent and directive scope and it’ll always expect the attribute value to be the model name which means you cannot provide an expression as the value of attribute mapped to “=” prefix.

供引用:“http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/”