Question

在下面的AngularJS代码中，当你在输入字段中输入东西时，我希望输入下面的div能够用输入的内容进行更新，但它并没有。有什么理由？：

HTML

<div ng-app="myApp">
    <input type="text" ng-model="city" placeholder="Enter a city"  />
    <div ng-sparkline ng-model="city" ></div>
</div>

的javascript

var app = angular.module('myApp', []);

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        template: '<div class="sparkline"><h4>Weather for {{ngModel}}</h4></div>'
    }
});

http://jsfiddle.net/AndroidDev/vT6tQ/12/

Answer 1

应该是

template: '<div class="sparkline"><h4>Weather for {{city}}</h4></div>'

因为您将模型绑定到城市

JSFiddle

Answer 2

将ngModel添加到范围内，如下所述 -

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        template: '<div class="sparkline"><h4>Weather for {{ngModel}}</h4></div>'
    }
});

更新了Fiddle

Answer 3

此代码的基本问题是您没有与指令（创建新范围）共享“ngModel”。也就是说，使用属性和链接功能可以更容易阅读。做出这些改变后，我最终得到了：

<强> HTML

<div ng-sparkline="city" ></div>

<强>的Javascript

app.directive('ngSparkline', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var newElement = '<div class="sparkline"><h4>Weather for {{' + attrs.ngSparkline + '}}</h4></div>';
            element.append(angular.element($compile(newElement)(scope)));
        }
    }
});

使用此模式，您可以在指令中包含所需的任何动态html或角度代码，并使用$compile服务进行编译。这意味着您不需要使用scope属性 - 变量会自动“继承”！

希望有所帮助！

查看小提琴： http://jsfiddle.net/8RVYD/1/

Answer 4

template: '<div class="sparkline"><h4>Weather for {{city}}</h4></div>'

Answer 5

问题是require选项意味着ngSparkline指令期望ngModel指令控制器作为其链接函数的第4个参数。您的指令可以像这样修改：

app.directive('ngSparkline', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        template: '<div class="sparkline"><h4>Weather for {{someModel}}</h4></div>',
        link: function(scope, element, attrs, controller) {
            controller.$render = function() {
                scope.someModel = controller.$viewValue;
            }
        }
    }
});

但这会在范围内创建someModel变量。我觉得这个用例并不是必需的。

fiddle

AngularJS模型在输入时不更新

5 个答案: