Question

我是AngularJs的新手。我曾在使用MVVM方法的KnockoutJs工作过。您可以在ViewModel中定义数据，并将data-bind定义到View。这样，您就可以创建模块化和单一用途的可重用控件，根据ViewModel的输入显示任何数据。如何在AngularJs中实现它？

我读到了scope，我认为这是Angular在View和Controller之间进行数据绑定的方式。在控制器内部，无论您分配给范围，都可以在View中使用。

但是，如何向Controller提供输入以便它可以处理输入并将值放在范围中，而范围又将显示在View中？例如让我们说我想创建一个控制器，它接受一个数字作为输入，将该数字加1并放入$scope.numberPlusOne然后在视图中，我使用{{numberPlusOne}}来显示添加的数字？如何实现它，就像我们对控制器进行嵌套时所需要的那样，对吧？

Answer 1

您可以使用它来访问控制器的输入

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

Answer 2

这可以解决您的问题吗？
我不知道KnockoutJs，但我可以给你一个角度为1.x的例子。

在视图中：

<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>

在控制器中：

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

}

指令：

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

在number.directive.html

中

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

$rootScope也是跨范围使用对象的另一种方法，但最好不要污染它..

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

如何给角度控制器输入

2 个答案: