控制器＆QUOT;如何使用＆QUOT从基本控制器继承;句法？ [英] How to inherit from base controller using "controller as" syntax?
问题描述
下面是一个片段演示如何从基控制器使用继承 $控制器和 $范围：
VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围，$控制器）{\r
$控制器（'BaseCtrl'，{\r
$范围：$范围\r
}）\r
}）;\r
\r
app.controller（'BaseCtrl'，函数（$范围）{\r
$ scope.name ='世界';\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8/＆GT;\r
＆LT;标题＆GT; AngularJS＆LT; /标题＆GT;\r
＆LT;脚本＆GT;\r
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;\r
＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl＆GT;\r
＆LT; P＆GT;您好{{名}}＆LT;！/ P＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
我怎么可以做同样的使用控制器语法？这个片段演示了我是谁后，但它不工作：
VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围，$控制器）{\r
$控制器（'BaseCtrl'，{\r
$范围：$范围\r
}）\r
}）;\r
\r
app.controller（'BaseCtrl'，函数（）{\r
this.name ='世界';\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8/＆GT;\r
＆LT;标题＆GT; AngularJS＆LT; /标题＆GT;\r
＆LT;脚本＆GT;\r
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;\r
＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl为主＆GT;\r
＆所述p为H.;你好{{main.name}}＆下;！/差异无显着\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
您可以使用控制器作为语法（或只使用由 $控制器提供程序返回的CTRL实例）和使用angular.extend。但我不认为还有另一种方式隐含角度会做，因为控制器作为语法最终放在各自的范围，因为指定为别名属性名称的控制器实例。但是，这真的不是继承，但使用对象扩展。
VAR CTRL = $控制器（'BaseCtrl为基础'，{//你并不真的需要为语法这里虽然使用
$范围：$范围
}）;angular.extend（这一点，CTRL）;
//或$控制器（'BaseCtrl为基础'，{//你并不真的需要为语法这里虽然使用
$范围：$范围
}）;
angular.extend（这一点，$ scope.base）; //使用为语法
或者你可以使用<一个href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain\"相对=nofollow>在控制器的构造函数本身的实现水平原型继承。有很多语法糖提供，打字稿的 扩展 还有另外一个很好的和简单的例如这里为好。
VAR应用= angular.module（'应用'，[]）;\r
\r
app.controller（'MainCtrl'，函数（$范围，$控制器）{\r
VAR CTRL = $控制器（'BaseCtrl为基础'，{\r
$范围：$范围\r
}）;\r
\r
angular.extend（这一点，CTRL）;\r
}）;\r
\r
app.controller（'BaseCtrl'，函数（）{\r
this.name ='世界';\r
}）; \r
＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT; HEAD＆GT;\r
＆LT;间的charset =UTF-8/＆GT;\r
＆LT;标题＆GT; AngularJS＆LT; /标题＆GT;\r
＆LT;脚本＆GT;\r
文件撰写（'＆LT;基本href =+ document.location +'/＆GT;'）;\r
＆LT; / SCRIPT＆GT;\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl为主＆GT;\r
＆所述p为H.;你好{{main.name}}＆下;！/差异无显着\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT; \r
Here is a snippet demonstrating how to inherit from a base controller using $controller and $scope:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
How can I do the same using "controller as" syntax? This snippet demonstrates what I am after, but it doesn't work:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>
You could use controller as syntax (or just use the ctrl instance returned by $controller provider) and use angular.extend. But i don't think there is another way implicitly angular would do this, since controller as syntax ultimately places the controller instance on the respective scope as a property name specified as alias. But this really isn't inheritance, but utilizing object extension.
var ctrl = $controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, ctrl);
//or
$controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, $scope.base); //With as syntax
Or you could use prototypical inheritance at the implementation level of the controller constructors itself. There are lots of syntactic sugars available, typescript's extends there is another nice and simple example here as well.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
var ctrl = $controller('BaseCtrl as base', {
$scope: $scope
});
angular.extend(this, ctrl);
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>
这篇关于控制器＆QUOT;如何使用＆QUOT从基本控制器继承;句法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
