爲什麼表達式不能在角度控制器中動態更新？

在此代碼中，我使用了兩個動態變量fbid和fburl。 fburl是使用fbid的表達式。爲什麼表達式不能在角度控制器中動態更新？

$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";

這裏是我的代碼。

// Code goes here 
 
angular.module("testApp", []) 
 
    .controller("testCtrl", function($scope) { 
 
    $scope.fbid = "bennadel"; 
 
    $scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal"; 
 
    console.log($scope.fburl); 
 
    })

<!DOCTYPE html> 
 
<html ng-app="testApp"> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="testCtrl"> 
 
    FacebookID<input type="text" ng-model="fbid" > 
 
    <img ng-src= "{{fburl}}"/> 
 
    <div>{{fburl}}</div> 
 
    </body> 
 

 
</html>

現在我的問題是，當我正在更新fbid爲什麼fburl不會自動更新？

來源

2015-02-23 user3427540

Angular沒有注意設置的值，你必須這麼說。使用$ scope。$ watch – 2015-02-23 13:04:34

這是因爲該值事後無法更新，需要在變量fbid上添加一個觀察器。

AngularJS docuemntation for $watch

// Code goes here 
 
angular.module("testApp", []) 
 
    .controller("testCtrl", function($scope) { 
 
    $scope.fbid = "bennadel"; 
 
    $scope.fburl = ""; 
 
    $scope.$watch('fbid ', function(newValue, oldValue) { 
 
     $scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal"; 
 
     console.log($scope.fburl); 
 
    }); 
 
    })

<!DOCTYPE html> 
 
<html ng-app="testApp"> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="testCtrl"> 
 
    FacebookID<input type="text" ng-model="fbid" > 
 
    <img ng-src= "{{fburl}}"/> 
 
    <div ng-bind="fburl"></div> 
 
    </body> 
 

 
</html>

來源

2015-02-23 13:05:22 beije

替代的解決方案 - 更清潔的方式。

// Code goes here 
 
angular.module("testApp", []) 
 
    .controller("testCtrl", function($scope) { 
 
    $scope.fbid = "bennadel"; 
 
$scope.fbFn = function() { 
 
       return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal"; 
 
      }; 
 
    })

<!DOCTYPE html> 
 
<html ng-app="testApp"> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="testCtrl"> 
 
    FacebookID<input type="text" ng-model="fbid" > 
 
<img ng-src= "{{fbFn()}}"/> 
 
    <div >{{fbFn()}}</div> 
 
    </body> 
 

 
</html>

快樂幫助！

來源

2015-02-23 13:48:35

當你爲'fbFn'指定一個函數的工作，但是爲什麼當我直接給變量賦值表達式值時它不工作？ – user3427540 2015-02-24 00:07:33

當** $ scope.anyPropery **（在這種情況下爲$ scope.fbid）發生變化時** $ digest **正在運行，導致所有$ scope相關函數也運行，這就是爲什麼'fbFn'在這裏工作。與設置$ watch相比，我喜歡這種方法。你可以更多地瞭解[$ diget cycle working]（http://www.slideshare.net/straker503/angularjs-performance） – 2015-02-24 11:25:10

爲什麼表達式不能在角度控制器中動態更新？

回答

相關問題