AngularJS模型在打字時沒有更新

在下面的AngularJS代碼中，當你在輸入字段中輸入東西時，我期望輸入下面的div用輸入的內容進行更新，但是它沒有。有什麼理由？：AngularJS模型在打字時沒有更新

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/

來源

2014-06-12 AndroidDev

您的指令不改變'ngModel'的價值有你不需要設置'NG-模型=「城市」'你的指令，我想看看@drew_w下面的例子，並設置'ng-sparkline'屬性值爲'city' –

添加ngModel的範圍如下所述 -

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

更新Fiddle

來源

2014-06-12 15:32:07 Prasad

我從http://www.ng-newsletter.com/posts/directives.html複製了教程代碼，並且我複製了它的示例從沒有添加範圍參數，雖然後面的示例做了。我讀了他們發佈的關於爲什麼要求範圍的內容，但沒有任何意義。你能解釋爲什麼它需要打印輸入的文本？太感謝了。 – AndroidDev

應該

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

，因爲你要綁定的T型車Ø城市

JSFiddle

來源

2014-06-12 15:30:16 XrXrXr

這段代碼的基本問題是你不與共享「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/

來源

2014-06-12 15:38:43

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

來源

2014-06-12 15:48:26 user3620126

的問題是，需要選項意味着ngSparkline指令預計ngModel指令控制器作爲其紐帶作用第四個參數。您的指令可以像這樣修改：

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

但這會在範圍內創建一些模型變量。我認爲這個用例不是必需的。

fiddle

來源

2014-06-12 15:53:31 sphinks

AngularJS模型在打字時沒有更新

回答

相關問題