相关疑难解决方法(0)

数据绑定如何在AngularJS框架中工作？

我没有在他们的网站上找到技术细节.当数据从视图传播到模型时,它或多或少清楚它是如何工作的.但是AngularJS如何在没有setter和getter的情况下跟踪模型属性的变化？

我发现有一些JavaScript观察者可以做这项工作.但Internet Explorer 6和Internet Explorer 7不支持它们.那么AngularJS如何知道我改变了例如以下内容并在视图上反映了这一变化？

myobject.myproperty="new value";

我有这个简单的场景:

输入元素,其值由jQuery的val()方法更改.

我试图用jQuery设置的值更新角度模型.我试着编写一个简单的指令,但它并没有按照我的意愿行事.

这是指令:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

这是jQuery的一部分:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

和HTML:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

这是我尝试的小提琴:http:
//jsfiddle.net/U3pVM/743/

有人可以指点我正确的方向吗？

我正试图找出当我的数据存储在服务中时如何正确处理绑定.

如果它将服务放入$ scope,然后让模板直接绑定到它,我可以使事情有效,但这似乎是一个非常糟糕的主意.

我基本上喜欢这样,以便我的视图/控制器能够轻松地改变服务中的状态,并在任何地方反映出来.

感觉我应该能够执行以下操作,但它不起作用(http://jsfiddle.net/aidankane/AtRVD/1/).

HTML

<div ng-controller="MyCtl">
    <select ng-model="drawing" ng-options="d.file for d in drawings"></select>
</div>
<div ng-controller="MyOtherCtl">
    {{ drawing }}
</div>

JS

var myApp = angular.module('myApp', []);

myApp.factory('myService', function(){
    var me = {
        drawings: [{'file':'a'}, {'file':'b'}]
    };
    // selected drawing
    me.drawing = me.drawings[0];
    return me;
});

function MyCtl($scope, myService){
    // can do:
    // $scope.mys = myService;
    // and then in html ng-model="mys.drawing"
    // but that seems wrong

    $scope.drawings = myService.drawings;
    $scope.drawing = myService.drawing;

    // can I not do this? …

首先,我应该提一下我正在努力过渡到客户端编程.我对js很新.我以前的经验主要是在C和一些装配.几年前我还做了一些非常简单的PHP,当时它还是4.0.所以简而言之,是javascript的新手,但我还是把它放了一下.

我做了很多搜索和潜伏,但未能纠正我的问题.

我正在弄清楚AngularJS的一些基础知识并且它非常好,但我很难理解指令的工作方式以及如何从自定义控件访问数据.

长话短说我试图使用angularjs为bootstrap工作制作一个自定义控件,这样我就可以在表单中正确使用它.

这是控件:http://tarruda.github.com/bootstrap-datetimepicker/

我有一些其他的控件,我想要工作,但我想如果我可以得到这一个我可以很容易得到其他人.

这是我在这一点上的基本框架的链接:http://jsfiddle.net/uwC9k/6/

首先,我试图在模板工作后如何初始化控件(其中,我认为此时我做的很多)

link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $('#' + scope.dpid).datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
}

当我把它放在link指令中时,它什么也没做.我甚至没有看到任何错误.scope.dpid确实显示了控件的ID,所以我认为它会起作用.但是唉,我对javascript的了解,告诉我,我不在范围之内,或者是一些无法访问元素的废话.

一旦我开始这样做,我不确定如何以表格形式访问这些数据.

任何帮助是极大的赞赏.

更新 基本位工作,现在我需要知道如何将新控件中的数据导入我的控制器.这是更新的新jsfiddle的链接. http://jsfiddle.net/tmZDY/1/

更新2 我想我对如何使这些数据可访问有了一个想法但是我对javascript缺乏了解又让我感到又干.

当我创建对象时,我就这样做了.

var elDatepicker = element.datetimepicker({
language : 'en',
pick12HourFormat : true,
});

但是,当我尝试使用这个对象时,似乎没有得到正确的对象,或者我只是缺少一些基本知识.无论哪种方式,这肯定让我感到愚蠢.

console.log(elDatepicker.getDate());

这失败了,getDate确实是一个方法,至少它看起来像是在插件的代码中.

我的 AngularJS 应用程序使用ng-repeat. AngularJS 发出 GET 请求，检索一个数组。该表正确显示了数组的元素。

该页面包含一个调用函数来修改数组的按钮。但是，该表不会更新以反映修改后的数组。

我已经尝试过以下方法：

• $scope.apply()更新后打电话。
• 将更新包含在传递给 的函数$scope.apply()中 $scope.apply(function...)。关联
• 使用$timeout 链接

这些尝试都没有奏效。此外，我相信这就是ng-repeat它apply()本身。

AngularJS

<script>
    var app2 = angular.module('myApp2', []);

    app2.controller('StocksController', function ($scope, $http, $timeout) {
        // When the page loads...
        // Load myData with REST GET
        $http.get("http://example.com/exWebAPI/api/Ticker/").then(function (response) {
            $scope.myData = response.data;
        });

        // Update the array
        $scope.SendData = function () {
            alert('Hello from SendData.');
            $scope.myData.splice(0, 2);
            $scope.$apply();
        };

    });
</script>

超文本标记语言

<div ng-app="myApp2" …