如何在角度视图中封装HTML和JavaScript？_Javascript_Angularjs

如何在角度视图中封装HTML和JavaScript？

javascript angularjs

如何在角度视图中封装HTML和JavaScript？,javascript,angularjs,Javascript,Angularjs,我有一个很大的标记，它由ng controller包装，看起来像这样： <div ng-controller="MyController"> <script> // MyController is bootstraped with current_item_data to save additional work of loading data using service, etc. var current_item_data =

我有一个很大的标记，它由

ng controller

包装，看起来像这样：

<div ng-controller="MyController">
    <script>
        // MyController is bootstraped with current_item_data to save additional work of loading data using service, etc.
        var current_item_data = <?= json_encode($this->view->current_item_data) ?>;
        var current_parent_item_data = <?= json_encode($this->view->current_parent_item_data) ?>;
    </script>

    <!-- large markup comes here -->
</div>

我想您看到了这里的问题，每次实例化

MyController

时，它都使用相同的全局变量，并且没有按预期工作

是的，我正在寻找解决办法，因为我目前无法重构代码库。

或者您可以使用routeProvider。。您可以根据页面分配控制器。希望这会有帮助

这里

app.js

var app = angular.module('myModule', ["ngRoute"]);

app.config(function($routeProvider) {
    // set up routing
    $routeProvider.when('/', {
        templateUrl : 'templates/dashboard.html',
        controller : 'mainCtrl',
        title : 'Home'
    }).when('/about', {
        templateUrl : 'templates/about.html',
        controller : 'AboutController',
        title : 'About'
    }).when('/contact', {
        templateUrl : 'templates/contact.html',
        controller : 'ContactController',
        title : 'Contact'
    }).otherwise({
        redirectTo : '/'
    });
});

html

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AD Operation Reports</title>


</head>

<body >
    <div ng-view></div>
</body>

</html>


广告运作报告

模板中不应该有

标记。相反，您可以使用angular的

ng init

指令：

<div ng-controller="MyController"
     ng-init="init(<?= json_encode($this->view->current_item_data) ?>, <?= json_encode($this->view->current_parent_item_data) ?>)">

</div>

看起来您想重新使用一些html+逻辑，这似乎是一个完美的工作directive@devqon好的，Angular不会编译模板中由

包装的代码？那么就不要在模板中包装

标记。执行类似于

的操作，我需要使用相同的控制器逻辑。您可以使用相同的逻辑：只需指定相同的控制器。如果需要参数化它们，路由也可以使用resolve
向每个控制器实例注入不同的值。这很奇怪，但当我尝试这样注入数据时，Angular抛出：表达式意外结束：init([{
确保引号已正确转义，等等。如果它工作正常，则可以使用简单字符串对其进行测试，因为这样会导致属性泄漏。ng init=“init（{“foo”：“bar”}）”因为引号未转义。
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AD Operation Reports</title>


</head>

<body >
    <div ng-view></div>
</body>

</html>

<div ng-controller="MyController"
     ng-init="init(<?= json_encode($this->view->current_item_data) ?>, <?= json_encode($this->view->current_parent_item_data) ?>)">

</div>

app.controller('MyController', ['$scope', '$window', function($scope, $window) {

    $scope.currentItemData = [];
    $scope.parentItemData = [];

    $scope.init = function(currentItemData, parentItemData) {
        $scope.currentItemData = currentItemData;
        $scope.parentItemData = parentItemData;
    }

}]);