相关疑难解决方法(0)

我是一名JQuery程序员,希望在我的下一个项目中使用AngularJS.在阅读了关于如何"思考Angular"而不是包含和使用JQuery的优秀答案后,我想知道使用JQuery + Angular有哪些好的用例.我想对我的Angular编程带来一点点熟悉.

从Stackoverflow帖子引用:

"最重要的是:在解决方案时,首先"在AngularJS中思考";如果你想不出解决方案,请问社区;如果完全没有简单的解决方案,那么随时可以找到jQuery "

我什么时候应该找到JQuery？

我正在尝试创建一个指令,允许将元素定义为可点击或不可点击,并将定义如下:

<page is-clickable="true">
    transcluded elements...
</page>

我想得到的HTML是:

<page is-clickable="true" ng-click="onHandleClick()">
    transcluded elements...
</page>

我的指令实现如下所示:

app.directive('page', function() {
    return {
        restrict: 'E',
        template: '<div ng-transclude></div>',
        transclude: true,
        link: function(scope, element, attrs) {
            var isClickable = angular.isDefined(attrs.isClickable) && scope.$eval(attrs.isClickable) === true ? true : false;

            if (isClickable) {
                attrs.$set('ngClick', 'onHandleClick()');
            }

            scope.onHandleClick = function() {
                console.log('onHandleClick');
            };
        }
    };
});

我可以看到,添加新属性后,Angular不知道ng-click,所以它不会触发.我尝试$compile在设置属性后添加一个,但它会导致无限链接/编译循环.

我知道我可以检查onHandleClick()函数内部是否isClickable值true,但我很好奇如何通过动态添加ng-click事件来实现这一点,因为我可能需要使用多个其他ng-*指令来执行此操作而我不想增加不必要的开销 有任何想法吗？

我可能会完全倒退,但我正在尝试制作三个嵌套指令,让我们调用它们:屏幕,组件和小部件.我希望widget能够触发组件中的某些行为,从而触发屏幕中的某些行为.所以:

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

我可以在小部件的链接fn中使用父组件require: "^component",但是如何进一步让组件控制器访问其包含的屏幕？

我需要的是组件中的内容,因此当您单击小部件的按钮时,它会提醒"screeny!". …

在我使用JQuery之前,我使用它来发送带参数的URL

window.location = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});

但是对于angularjS,这不起作用

$scope.myButton = function() {
    $window.location.open = myUrl + $.param({"paramName" : "ok","anotherParam":"hello"});
};//Error: $ is not defined

任何人都可以帮我在angularJs中做到这一点

我想知道是否有可能在angularjs bootstrap tabset选项卡标题内编写html.我想在标题中添加一个svg.我已经在plunker中创建了一个快速片段来尝试演示我遇到的问题.

<tabset>
  <tab heading="<span>hello</span><em>1</em>">One</tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

有任何想法吗？

谢谢

我使用Angular Kendo UI项目将Telerik Kendo网格与Angular相结合.

我有以下标记:

<div kendo-grid="" k-options="thingsOptions" style="height: 600px;" />

和我的控制器中的以下代码:

    $scope.thingsOptions = {
        dataSource: {
            type: "json",
            transport: {
                read: "/OM/om/getAssets",
                dataType: "json"
            },
            schema: {
                model: {
                    id: "ProductID",
...

这一切都正常,但我想从我的控制器强制数据源刷新我的网格.就像是

 $scope.getTasks = function() {
    $scope.thingsOptions.dataSource.read();
};

这是可以从控制器做的吗？我总能做点什么

$("#taskGrid").data("kendoGrid").dataSource.read();

在我的控制器中.但是从我的控制器中选择一个HTML元素似乎有点不对劲.

我们的网站目前正在使用jQuery库,每月流量约为100万.我们希望包含以API为中心的方法,因此决定转向Javascript MVC并为其选择了angularJS.

现在我的问题是,我应该在Angular的顶部使用jQuery,以便我需要重写最小的DOM操作代码,或者我应该以Angular方式重写所有内容？我们正在使用像plupload,jQuery UI这样的jQuery插件.在网站上等.请建议最佳的迁移方式(页面加载时间也很重要).

如果我有jQuery背景,已经通过"Thinking in AngularJS"？但没有得到一个明确的答案

当我从列表中选择一个项目时,我需要显示用于在单页面应用程序中编辑项目的模态对话框.

问题:我使用了visible绑定,但结果很麻烦,并且它无法正常工作,因为它只显示对话框,没有叠加,淡入淡出(如果有的话)不起作用.

HTML:

<div class="modal hide fade" data-bind="visible:selectedItem, with:selectedItem">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 data-bind="text:name"></h3>
  </div>
  <div class="modal-body">
    <form data-bind="submit:deselectItem">
        <!-- editor for item here -->
    </form>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-bind="click:deselectItem">Close</a>
  </div>
</div>

这个模型是带有observableList,obervable selectedItem和deselectItem函数的简单对象,它将selectedItem设置为null.

我很困惑,在创建我的应用程序时开始.

当我单击添加按钮时,我想要显示一个表单 - 我是否将div添加到该按钮？

我该怎么攻击这个？

码:

<body>
<div id="wrap">

  <!-- Begin page content -->
  <div classa="container">
    <div class="page-header">
      <h1>Birthday Reminders</h1>
    </div>
       <p>Data Here</p>
  </div>

  <div id="push"></div>
</div>

<div id="footer">
  <div class="container">
    <a href="#">Add</a>
  </div>
</div>
    <script type="text/javascript" src="js/cordova-2.5.0.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

应该在Angular2中正确包含jQuery for Bootstrap 4,考虑架构最佳实践和加载页面时的潜在性能？