指令之间没有数据绑定's的范围及其's模板

no data binding between directive's scope and it's template

本文关键字：范围模板之间指令数据绑定更新时间：2023-09-26

我有一个简单的指令，它在html模板中包含这个输入元素：

<input type="text" placeholder="Search" class="form-control" ng-model="searchValue" ng-keyup="keyup($event, searchValue)">

这是指令js文件：

define(['angular', 'module'], function (angular, module) {
    'use strict';
    var templateUrl = module.uri.replace('.js', '.html');
    angular.module('App.directives')
        .directive('navBar',[function() {
            return {
                scope: {
                    options: '=options'
                },  
                restrict: 'E',
                replace: 'true',
                templateUrl: templateUrl,
                link: function($scope, elem, attrs) {
                    $scope.$watch('options', function (val) {
                        var options = $scope.options || {};
                        if(options.search) {
                            $scope.searchValue = options.search.initValue || '';
                            $scope.keyup = function(e, value) {
                                options.search.onSearch(e, value);
                            }
                        }
                    });
                }
            }
        }]);
});

我的问题是控制器没有在视图上渲染模型值。

看看这把小提琴。

我仍然不太确定这是否是您想要的：

http://jsfiddle.net/coma/8d5fj8Lo/2/

app.directive('test', function () {
    return {
        restrict: 'E',
        template: '<div><input type="text" placeholder="Search" class="form-control" ng-model="searchValue"><span>{{blarg}}, {{searchValue}}</span></div>',
        replace: true,
        link: function ($scope, elem, attrs) {
            $scope.$watch('searchValue', function (n, o) {
                if (n === o) {
                    return;
                }
                $scope.blarg = n + 'fooo';
            });
        }
    };
});

因此，基本上，与其监听keyup事件并将searchValue传递给侦听器，不如直接观看它

我删除了选项上的$watch，因为它在那里什么都没做。