How to give input to an angular controller

Question

I am new to AngularJs. I've worked on KnockoutJs which has MVVM methodology. You define your data in ViewModel and data-bind it to the View. That way, you can create modular and single-purpose reusable controls that show any data based on the input to ViewModel. How to achieve it in AngularJs?

I read about scope, which I feel is Angular's way of data binding between View and Controller. Inside Controller, whatever you assign to scope can be used in View.

However, how to give input to the Controller so that it can then process the input and place values in scopes which in turn will get displayed in View? e.g. Let's say I want to make a Controller which takes a number as input, adds 1 to that number and puts in $scope.numberPlusOne and then inside the view, I use {{numberPlusOne}} to display that added number? How to achieve it, as it would be needed when we do nesting of Controllers, right?

No version of Angular is provided. As far as I know Angular 1 is still pretty popular. https://docs.angularjs.org/api/ng/directive/form has all of your answers. In your quick example, are you submitting a form that takes a number as input, having the controller add 1, then throwing the variable into the scope? A bit unclear. — SirUncleCid, Feb 25 '17 at 07:19
The example I took was a hypothetical one, I haven't coded it yet. — upInCloud, Feb 25 '17 at 07:21

score 0 · Answer 1 · answered Feb 25 '17 at 07:29

0

You can can use this to access the input from the controller

$scope.function(elementName){
angular.element("'[name="+elementName+"]'").val('');
}

answered Feb 25 '17 at 07:29

bashayer

16
2

score 0 · Answer 2 · edited May 23 '17 at 11:46

Can this solve your problem ?
I don't know KnockoutJs, but I can give you the example on angular 1.x .

In View:

<div ng-controller="numberCtrl">
    <button type="button" ng-click="plusOne()">Plus One</button><br>

    <input type="number" ng-model="inputNumber" />
    <button type="button" ng-click="plusInput(inputNumber)">Plus One</button><br>

    <p>{{numberPlusOne}}</p><br>
    <p>{{numberContainer.plusNumber}}</p><br>
    <h1>Above code is parent scope</h1>

    <number-panel load-container="numberContainer"></number-panel>

</div>

In Controller:

app.controller('numberCtrl', numberCtrl);

numberCtrl.$inject = ['$scope', ...];

function numberCtrl($scope, ...) {

   $scope.inputNumber = 0;

   $scope.numberContainer = {
        "plusNumber": $scope.inputNumber,
        // "minusNumber": null
    };

    $scope.numberPlusOne = 0;

    $scope.plusOne(){
        $scope.numberPlusOne ++;
    }

    $scope.plusInput(num){
        $scope.numberPlusOne += num;
    }

}

In directive:

.directive('numberPanel', function () {
    return {
        templateUrl: 'views/template/number.directive.html',
        scope: {
            loadContainer: '=',
        },
        replace: true,
        restrict: 'EA',
        controller: function ($scope, $element, $attrs) {
           // here can access $scope.numberContainer through $scope.loadContainer
           // also you can create other child functions here
           $scope.plusThree = function(){
               $scope.loadContainer.plusNumber += 3
           }
        }
    };
});

In number.directive.html

<div>
    <h1>Child Scope</h1>
    <p>{{ loadContainer.plusNumber }}</p><br>
    <button type="button" ng-click="plusThree()">Plus Three</button>
</div>

$rootScope is also another way to use objects across scopes, but better not to pollute it..

ref: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
stackoverflow: $on and $broadcast in angular

Here, you have initialized the default value to 0, right? What if instead, you needed to take it as an input to the controller function? Let's say some other controller (maybe this controller's parent) sends it the value? How do we achieve that? — upInCloud, Feb 25 '17 at 07:54
I edited the post to use directive when dealing with nest scope, see https://docs.angularjs.org/guide/directive. — stackoverYC, Feb 25 '17 at 08:23

How to give input to an angular controller

2 Answers2