使用ng-include时如何使作用域功能起作用?

时间:2015-07-31 13:29:04

标签: javascript html css angularjs

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="keyboard.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab|Roboto' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="keyboard.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-include src="'keyboard.html'"></div>
        First Name: <input type="text" ng-model="firstName"><br>
        Last Name: <input type="text" ng-model="lastName"><br>
        <br>
        Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
$scope.insertString = function(letter) {
        //$scope.name = $scope.name + letter;
        $scope.name = [$scope.name.slice(0,$scope.cursorPosVal),letter,$scope.name.slice($scope.cursorPosVal)].join('');
        console.log($scope.name);

        setTimeout(function(){ setCaretPosition("inputBox", $scope.cursorPosVal); }, 30);
    };
</script>

</body>
</html>

我知道这有点混乱,(主要代码只是来自w3schools的一个示例应用程序)但它显示了我想要做的事情。所以我有一个键盘应用程序,我带入文件(ng-include),它看起来非常奇妙。我的问题是$scope未得到承认。我已经阅读了“理解范围”github文档,但对我来说,这只是一点点。如果有人可以解释我需要做些什么以确保我的所有$scope函数实际起作用,我会非常感激。

1 个答案:

答案 0 :(得分:1)

正如Fissio在评论中所说,你在控制器之外声明了一个范围函数:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
/**** see this here ****/
$scope.insertString = function(letter) {
        //$scope.name = $scope.name + letter;
        $scope.name = [$scope.name.slice(0,$scope.cursorPosVal),letter,$scope.name.slice($scope.cursorPosVal)].join('');
        console.log($scope.name);

        setTimeout(function(){ setCaretPosition("inputBox", $scope.cursorPosVal); }, 30);
    };

这就是你需要的:

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.insertString = function(letter) {
            //$scope.name = $scope.name + letter;
            $scope.name = [$scope.name.slice(0,$scope.cursorPosVal),letter,$scope.name.slice($scope.cursorPosVal)].join('');
            console.log($scope.name);

            setTimeout(function(){ setCaretPosition("inputBox", $scope.cursorPosVal); }, 30);
        };
    });

您不能在控制器之外使用关键字$scope,因为它绑定到您的控制器。当它在外面的角度不会知道它是什么,这就是为什么它会说它不被识别的东西