Javascript 使用angular.js中的输入从指令调用控制器_Javascript_Angularjs_Forms_Angularjs Directive_Angularjs Controller

Javascript 使用angular.js中的输入从指令调用控制器

javascript angularjs forms

Javascript 使用angular.js中的输入从指令调用控制器,javascript,angularjs,forms,angularjs-directive,angularjs-controller,Javascript,Angularjs,Forms,Angularjs Directive,Angularjs Controller,我通过制作基于浏览器的数独解算器来学习angular。有很多方法可以解决我的问题，但我正在寻找最有角度的方法 MyHTML使用嵌套的ng repeat创建9x9文本输入网格。我希望实现的行为是：用户在文本输入中输入一个数字（使用一个名为“grid cell”的指令）后，将触发一个onBlur事件，该数字将添加到控制器的9x9数组中（在控制器中标识为$scope.grid，它初始化为九个空字符串的数组）我的html看起来像这样。我对此感觉相当好： <div ng-controller="S

我通过制作基于浏览器的数独解算器来学习angular。有很多方法可以解决我的问题，但我正在寻找最有角度的方法

MyHTML使用嵌套的ng repeat创建9x9文本输入网格。我希望实现的行为是：用户在文本输入中输入一个数字（使用一个名为“grid cell”的指令）后，将触发一个onBlur事件，该数字将添加到控制器的9x9数组中（在控制器中标识为$scope.grid，它初始化为九个空字符串的数组）

我的html看起来像这样。我对此感觉相当好：

<div ng-controller="SudokuController">
    <table>
        <tr ng-repeat="row in dimension">
            <td ng-repeat="col in dimension">
                <grid-cell row="{{ row }}" col="{{ col }}"></div>
            </td>
        </tr>
        <tr>
            <td id="submit" colspan="9">
                <button ng-click="submit()" id="submit">Submit</button>
            </td>
        </tr>
    </table>
</div>


提交

我的angular代码如下所示（我觉得我需要的不仅仅是一个控制器和一个指令）：

var-app=angular.module（'app'，[]）；
应用程序控制器（'SudokuController'，函数（$scope）{
$scope.dimension=[1,2,3,4,5,6,7,8,9]；
$scope.grid=[]；
对于（var i=1；i，您可以在grid cell指令内更新网格：
var app = angular.module('app',[]);

app.controller('SudokuController', function($scope) {
    $scope.dimension = [1,2,3,4,5,6,7,8,9];
    $scope.grid = [];
    for (var i = 1; i<=$scope.dimension.length; i++) {
        $scope.grid[$scope.grid.length] = ['','','','','','','','',''];
    }
    $scope.addNumber = function(row, col, val) {
        $scope.grid[row][col] = val; // I would like it to work this way
    };
    $scope.submit = function() {
        // insert sudoku-solving algorithm here
    };
});

app.directive('gridCell', function() {
    return {
        restrict: "EA",
        template: '<input type="text" />',
        replace: true,
        scope: {
            row: '@',
            col: '@'
        },
        link: function(scope, elem, attrs) {
            elem.bind('blur', function() {
                //how do I correctly write this?
                scope.addNumber(scope.row, scope.col, elem[0].val);
            });
        }
    }
});

app.controller('MainCtrl', function($scope) {
    $scope.dimension = [1,2,3,4,5,6,7,8,9];
    $scope.grid = [];
    for (var i = 1; i<=$scope.dimension.length; i++) {
        $scope.grid[$scope.grid.length] = ['','','','','','','','',''];
    }
    $scope.submit = function() {
        // insert sudoku-solving algorithm here
    };
});

app.directive('gridCell', function() {
    return {
        restrict: "EA",
        template: '<input type="text" ng-model="value" />',
        replace: true,
        scope: {
            row: '&',
            col: '&',
            grid: '='
        },
        link: function(scope, elem, attrs) {
            elem.bind('blur', function() {                   
                scope.$apply(function () {
                  if (scope.value)
                  {
                    scope.grid[scope.row()][scope.col()] = scope.value;
                  }
                });                    
            });
        }
    }
});

app.controller（'MainCtrl'，函数（$scope）{
$scope.dimension=[1,2,3,4,5,6,7,8,9]；
$scope.grid=[]；
对于（var i=1；i尝试以下第三种方法：

该示例使用别名，因此可以从作用域引用控制器的实例
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript">

var app = angular.module("MyApp", []);

//
// our controller
//
app.controller("MyController", MyController)
function MyController($scope) {

    var _private_var1 = "**value is not set**";

    this.MyMethod = function(var1) {
        _private_var1 = var1;

   }

    this.GetVar1 = function() {
        return _private_var1;
    }

}

app.directive({
    "mySampleBtn": mySampleBtnDirective,
    "mySampleTxt": mySampleTxtDirective
});

//
// our directives
//
function mySampleBtnDirective(){
    return {
        restrict: 'EA',
        template: "<button ng-click='CallMethod()'>{{name}}</button>",
        link: function(scope, element) {

            var ctrl = element.attr('ctrl');
            scope.name = element.attr('name');

            scope.CallMethod = function() {             
                alert( scope[ctrl].GetVar1() );
            }

        }
    }
};

function mySampleTxtDirective(){
    return {
        restrict: 'EA',
        template: "<input ng-model='theText'/>",
        link: function(scope, element) {

            var ctrl = element.attr('ctrl');

            scope.$watch("theText", function(newVal){
                scope[ctrl].MyMethod( scope.theText );
            });


        }
    }
};

</script>

<body ng-app="MyApp">

<div ng-controller="MyController as ctrlName">
    theText: <my-sample-txt ctrl="ctrlName"></my-sample-txt>, invokes <i>ctrlName.MyMethod( theText )</i><br/>
    <br/>
    <my-sample-btn name="Sample One" ctrl="ctrlName"></my-sample-btn>, invokes <i>alert( ctrlName.GetVar1() )</i><br/>
    <br/>
    => ctrlName.GetVar1() = {{ ctrlName.GetVar1() }}
</div>

</body>

</head>
</html>


var-app=angular.module（“MyApp”，[]）；
//
//我们的管制员
//
应用控制器（“MyController”，MyController）
函数MyController（$scope）{
var\u private\u var1=“**未设置值**”；
this.MyMethod=函数（var1）{
_private_var1=var1；
}
this.GetVar1=函数（）{
返回_private_var1；
}
}
应用程序指令({
“mySampleBtn”：mySampleBtn指令，
“mySampleText”：mySampleText指令
});
//
//我们的指令
//
函数mySampleBtnDirective（）{
返回{
限制：“EA”，
模板：“{name}}”，
链接：功能（范围、元素）{
var ctrl=element.attr（'ctrl'）；
scope.name=element.attr（'name'）；
scope.CallMethod=函数（）{
警报（作用域[ctrl].GetVar1（））；
}
}
}
};
函数mySampleTxtDirective（）{
返回{
限制：“EA”，
模板：“”，
链接：功能（范围、元素）{
var ctrl=element.attr（'ctrl'）；
范围$watch（“theText”，函数（newVal）{
scope[ctrl].MyMethod（scope.theText）；
});
}
}
};
文本：，调用ctrlName.MyMethod（文本）



，调用警报（ctrlName.GetVar1（））



=>ctrlName.GetVar1（）={{{ctrlName.GetVar1（）}
查看第三种方法：这确实很有效。我想知道如何轻松、干净地调用控制器函数，我可以通过多个指令来使用它。此外，我希望将网格保留在控制器中，它不会增加作为属性提到的值。
<tr ng-repeat="row in dimension">
  <td ng-repeat="col in dimension">
    <grid-cell row="row" col="col" grid="grid"></grid-cell>
  </td>
</tr>

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript">

var app = angular.module("MyApp", []);

//
// our controller
//
app.controller("MyController", MyController)
function MyController($scope) {

    var _private_var1 = "**value is not set**";

    this.MyMethod = function(var1) {
        _private_var1 = var1;

   }

    this.GetVar1 = function() {
        return _private_var1;
    }

}

app.directive({
    "mySampleBtn": mySampleBtnDirective,
    "mySampleTxt": mySampleTxtDirective
});

//
// our directives
//
function mySampleBtnDirective(){
    return {
        restrict: 'EA',
        template: "<button ng-click='CallMethod()'>{{name}}</button>",
        link: function(scope, element) {

            var ctrl = element.attr('ctrl');
            scope.name = element.attr('name');

            scope.CallMethod = function() {             
                alert( scope[ctrl].GetVar1() );
            }

        }
    }
};

function mySampleTxtDirective(){
    return {
        restrict: 'EA',
        template: "<input ng-model='theText'/>",
        link: function(scope, element) {

            var ctrl = element.attr('ctrl');

            scope.$watch("theText", function(newVal){
                scope[ctrl].MyMethod( scope.theText );
            });


        }
    }
};

</script>

<body ng-app="MyApp">

<div ng-controller="MyController as ctrlName">
    theText: <my-sample-txt ctrl="ctrlName"></my-sample-txt>, invokes <i>ctrlName.MyMethod( theText )</i><br/>
    <br/>
    <my-sample-btn name="Sample One" ctrl="ctrlName"></my-sample-btn>, invokes <i>alert( ctrlName.GetVar1() )</i><br/>
    <br/>
    => ctrlName.GetVar1() = {{ ctrlName.GetVar1() }}
</div>

</body>

</head>
</html>