如何通過AngularJs中的函數傳播變化的範圍變量？

例如，如果我有以下情況：如何通過AngularJs中的函數傳播變化的範圍變量？

function ACtrl($scope) { 
    $scope.title = "Title"; 
    $scope.funkyString= funkyAndComplexStuff($scope.title); 
    function funkyAndComplexStuff(title) { 
    /*...*/ 
    return title; 
    } 
}

的HTML：

<div ng-app> 
    <div ng-controller="ACtrl"> 
    <div> 
     {{title}} and length {{funkyString}} 
     <input type="text" ng-model='title' /> 
    </div> 
    </div> 
</div>

我想$scope.funkyString更新每$scope.title時間得到改變。

至於我看到我有兩個選擇：

使用的變量
一個watch創建一個過濾器，我可以適用於$scope.funkyString

但是這兩個聽起來unndecessarily重。有什麼我可以用來後處理的數據，一旦它被改變？

編輯：

修改我的例子，讓人們有希望較少困惑。

來源

2015-07-21 Arturs Vancans

我會嘗試這樣的事情，所以它可以從其它代碼的領域處理變爲$ scope.title也

<div ng-controller="ACtrl"> 
    <div> 
     {{title}} and length {{ funkyAndComplexStuff(title) }} 
     <input type="text" ng-model='title' /> 
    </div> 
    </div>

來源

2015-07-21 09:15:52 ssilas777

這是一個抽象的例子。我其實不需要這個長度。 –

有很多正確的方法來解決問題，我試圖根據你給定的代碼來解決你的問題。我真的不認爲它值得反對。 – ssilas777

這不是我的帖子所要求的。這僅僅是一個例子。問題是，現在是否還有什麼我可以用來後處理數據，一旦它被改變？ –

你可以做title.length爲@ ssilas777已建議。您也可以將$scope變量設置爲一個函數。據我瞭解，該功能將在範圍的$digest循環中調用，當任何綁定模型發生變化時該功能將觸發。看到這個plunkr：http://plnkr.co/edit/9xspXj5ND8seEX2LNeMe?p=preview

看到這個HTML：

<input type="text" ng-model="title" /> 
Num chars: <span ng-bind="numCharsInTitle()"></span>

和JS：

$scope.title = "The Title"; 
$scope.numCharsInTitle = function() { 
    return $scope.title.length; 
}

來源

2015-07-21 09:17:59

ng-change可以根據到您的title模式勢必在元素上的簡單解決方案。如果它是一個輸入比如上例中此力量可以工作：

app.controller('MainCtrl', function($scope) { 
    $scope.title = "Title"; 

    $scope.funkyAndComplexStuff = function(title) { 
    /*...*/ 
    $scope.funkyString = title.length; 
    } 
});

...

<body ng-controller="MainCtrl"> 

    {{title}} and length {{funkyString}} 
    <input type="text" ng-model='title' ng-change="funkyAndComplexStuff(title)" /> 

</body>

來源

2015-07-21 09:22:44

像ssilas777和查理S和你說，你可以在$scope

使用 $watch，定製 $filter或功能

但對我來說，維護與視圖鏈接的函數的代碼很複雜。我優先使用$watch，因爲所有的處理都在控制器中，只有$scope.numberOfChars存在於視圖中。

如果您使用這麼多時間，我會建議您創建一個自定義過濾器。

angular.module('app',[]) 
 
.controller('ACtrl', 
 
function ($scope) { 
 
    $scope.title = "Title"; 
 
    getNumberChars($scope.title); 
 
    function getNumberChars(title) { 
 
    $scope.numberOfChars = title.length; 
 
    }; 
 
    
 
    $scope.getNumberChars = function() { 
 
    return $scope.title.length; 
 
    }; 
 
    
 
    $scope.$watch('title',getNumberChars); 
 
}) 
 
.filter('customFilter', function() { 
 
    return function(input) { 
 
    return input.length; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="ACtrl"> 
 
    <div> 
 
     {{title}} and length {{numberOfChars}} or {{title.length}} or {{getNumberChars()}} or {{title | customFilter}} 
 
     <input type="text" ng-model='title' /> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-07-21 09:26:46

爲什麼不乾脆：

function ACtrl($scope) { 
    $scope.title = "Title"; 
    $scope.funkyAndComplexStuff = function() { 
    /*..do stuff with $scope.title..*/ 
    return $scope.title; // or whatever 
    } 
}

的HTML：

<div ng-app> 
    <div ng-controller="ACtrl"> 
     <div> 
     {{title}} and length  {{funkyAndComplexStuff()}} 
     <input type="text" ng-model='title' /> 
     </div> 
    </div> 
    </div>

不知道爲什麼有人downvoted，但這裏是一個演示：http://jsfiddle.net/xhdk3f25/1/

來源

2015-07-21 09:30:14 Strelok

同意，完全合理的答案。 –

如何通過AngularJs中的函數傳播變化的範圍變量？

回答

相關問題