小编tic*_*tic的帖子

将angularjs模块导出为es6模块

您应该根据我们使用的样式指南将angularjs模块包装在IIFE中

https://github.com/johnpapa/angular-styleguide/tree/master/a1#iife

我-dir.js

(function() {
    'use strict';

    angular
        .module('my.dir', [])
        .controller('MyDirController', MyDirController),
        .directive('my-dir', MyDirDirective);

    function MyDirController() {

    }

    function MyDirDirective() {
        return {
            restrict: 'E',
            controller: MyDirController
        }
    }
})();
Run Code Online (Sandbox Code Playgroud)

app.js

(function() {
    'use strict';
    angular
        .module('app', ['my.dir'])
})();
Run Code Online (Sandbox Code Playgroud)

但是我们现在正在使用webpack来捆绑es6模块.我们该如何使用这个IIFE export?我们不能这样做,export default angular.module('my-dir', [])因为出口必须是一个顶级命令.另外,我们应该返回一个模块名称的字符串?因此它可以作为app模块中的要求包含在内.什么是最佳做法?

这有效,但你必须重新输入模块名称,并且在IIFE之外导出似乎有点混乱(我认为必须如此)

(function() {
    angular.module('my.dir', [])
        .controller('MyDirController', MyDirController)
        .directive('my-dir', MyDirDirective);

    function MyDirDirective(appPath) {
        return {
            restrict: 'E',
            scope: {},
            bindToController: {},
            controllerAs: '$ctrl',
            template: '<div ng-bind="$ctrl.msg"></div>',
            controller: MyDirController
        };
    }

    function MyDirController() …
Run Code Online (Sandbox Code Playgroud)

javascript babel angularjs es6-module-loader

6
推荐指数
1
解决办法
8339
查看次数

在 React 中重写组件实例上的 prop

如果组件有一个现有的 prop 传递给它,我如何在 HOC 中覆盖它。以下内容将显示bar而不是changed,这从应用程序的角度来看是有意义的。

class App extends React.PureComponent {
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        {this.props.foo}
      </div>
    );
  }
}

const App2 = props => <App {...props} foo={"bar"} />;
const App3 = props => <App2 {...props} foo={"changed"} />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App3 />, rootElement);
Run Code Online (Sandbox Code Playgroud)

https://codesandbox.io/s/k015wplr6o

这是一个更大的应用程序的一部分,其中存储了组件的实例,稍后必须使用不同的值作为 prop 重新创建该实例。

reactjs

5
推荐指数
0
解决办法
9202
查看次数

$ http.get成功调用错误函数

我没有能力更改端点,如果失败,它将返回200 OK响应,其中包含不同的数据.如何让它运行错误函数(then来自promise 的第二个函数)?

我的服务:

self.getData = function() {
    return $http.get('/api/controller/action').then(function(x) {
            //This will be run even on failure. How can I call....
            return x.data;
        }, function(x) {
            //......here, from the front-end, so that, the 2nd function in
            //inside the 'then' in the controller is run.
            //This code will currently never run as it never fails server side.
            return x;
        });
};
Run Code Online (Sandbox Code Playgroud)

控制器:

MyService.getData().then(function(x) {
    //Success
}, function(x) {
    //Failure
});
Run Code Online (Sandbox Code Playgroud)

javascript angularjs angularjs-directive angular-promise

4
推荐指数
1
解决办法
94
查看次数