将Angular元素绑定到控制器外部的作用域

vol7ron

仍在快速学习AngularJS,下面是一个简单的测试示例,显示了使用的清单ng-repeat,最终将弹出一个清单


小提琴

HTML:

<div class="container" ng-app="main">
    <div id="person-info"></div>
    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo()">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>
</div>

JavaScript:

angular.module('main',[]);

// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}

// Main Controller
function PeopleController ($scope) {
    $scope.people = model;

    $scope.showPersonInfo = function (){
        document.getElementById('person-info').innerHTML = this.person.description;
    };
}

小提琴


以上是我遇到的两个问题:

  1. 在点击控制器中使用DOM查找/操作感觉不对

  2. 与第一点有关,必须有一种更好的方法将控制器外部的元素绑定到范围模型。理想情况下,我想要一个类似于以下内容的答案:<div id="person-info">{{$scope.person.description}}</div>,其中的点击控制器只需要专注于设置$scope.person或其他事件处理即可。


自从我上次查看Angular以来,文档已经变得越来越好,但是我欢迎提出评论以提高可读性或最佳/通用做法。例如,我可能会因为使用“ main”作为应用程序名称而感到悲伤:)

尼迪什·克里希南(Nidhish Krishnan)

如果您要访问PeopleController控制器的范围之外(如下所示),请使用$rootScope


外部控制器范围(工作演示

html

<div class="container" ng-app="main">
     <div id="person-info">{{desc}}</div>
    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo(person.description)">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>
</div>

脚本

angular.module('main',[]);
// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}
// Main Controller
function PeopleController ($scope, $rootScope) {
    $scope.people = model;

    $scope.showPersonInfo = function (personDesc){
        $rootScope.desc=personDesc;
    };
}

内部控制器范围(工作演示

我的建议是将<div id="person-info">{{value}}</div>控制器封装PeopleController中

html

<div class="container" ng-app="main">

    <div id="people" ng-controller="PeopleController" ng-cloak>
        <div id="person-info">{{desc}}</div>
        <div class="person" ng-repeat="person in people" ng-class-even="'even'">
            <a href="" ng-click="showPersonInfo(person.description)">( more )</a> <span>{{person.name}}</span>
        </div>
    </div>

脚本

   angular.module('main',[]);

// Main Model
var model = [];
for (var i=0,n=10; i<n; i++){
    model[model.length] = {'name': 'Person '+ i, 'description': 'Person ' + i + ' description'};
}

// Main Controller
function PeopleController ($scope) {
    $scope.people = model;

    $scope.showPersonInfo = function (personDesc){
        $scope.desc=personDesc;
    };
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Ajax 发布到控制器 404

Laravel CRUD 销毁方法不起作用。无法将数据从视图传递到控制器以删除数据

将复选框值从视图传递到控制器

如何将多个单选按钮值绑定到控制器动作

不适用控制器的双向数据绑定 - AngularJS

组件,在 Angularjs1.5 中绑定 - 将数据从一个控制器传递到另一个控制器

Rails/Ajax/ jQuery:将多个参数从 jquery 传递到 Rails 控制器

使用 angularjs 将 NULL 数据发布到 asp.net 核心控制器

面临将值从视图传递到控制器的困难

将数据从模态弹出窗口传递到控制器

用于将 id 传递到控制器以及从控制器到视图的 Codeignitter 路由

如何将循环变量从循环传递到控制器?

调用函数将 Json 从视图控制器解析到其他视图

如何将数据从模型传递到 Laravel 中的控制器

如何将数据从一个视图控制器传递到另一个视图控制器,并且在视图控制器之间有一个显示视图控制器

Laravel 如何使用 ajax 将数据从控制器传递到模态对话

Laravel 动态路由到控制器

Swift:将数据从视图控制器传递到导航控制器

将多个主体发布到 Web api 控制器

从控制器外部访问属性

如何将单个元素从列表传递到控制器

AngularJS 1.7.9 从控制器到组件的绑定变量提供未定义的值

如何使用 NodeJS 将 jwt 令牌从控制器传递到路由器

如何将模型 json 绑定到控制器中的组合框?

努力将数据从控制器传递到路由

是否可以将标签栏控制器类中从 Firebase 检索到的数据从标签栏控制器传输到视图控制器?Xcode, 斯威夫特

无法将外部存储库注入我的控制器

JSON 到 MVC 控制器

将数据从 DropDownList 发布到 MVC 控制器

Rails将整数值从视图传递到控制器